#tpl.js
##简介
tpl.js是一个比较极致(极小,极快,极简单)的js模板引擎,可以在各种js环境中使用。
##特性
##语法说明
###简述 tpl.js中模板语法中以行为单一,分为js行语句,和输出行语句。顾名思义,js行语句是编译时候会当做js执行的语句, 而输出行语句,则是会输出为html。
###具体语法
#示例
<html>
<head>
<meta charset="utf8"/>
<script type="text/javascript" src="tpl.js"></script>
</head>
<body>
数据在本文件内
<div class="users">
<script type="tpl">
<table>
for(var i=0;i<users.length;i++){
var user = users[i];
<tr>
<td>@user.name</td>
<td>@{user.age}year</td>
<td>@user.sex</td>
<td>@user.email\@126.com<td>
</tr>
}
<table>
</script>
</div>
<p></p>
通过ajax获取数据<br>
<script type="tpl" data-data-url='./users.js'>
!!@D.length原样输出<br/>
!@D.length解析输出<br/>
<select>
for(var i=0;i<D.length;i++){
var user = D[i];
<option value="@user.age" age="@user.age">
@.name
</option>
}
</select>
</script>
<div id="result">
</div>
通过ajax获取数据<br>
<script type="tpl" id="id" data-data-url='./users.js' data-tpl-url='./u.html?v'>
</script>
<script type="text/javascript">
var beg = new Date().getTime();
var users=[
{
name:'name',
age:12,
sex:'boy',
email:'nimei'
}, {
name:'name1',
age:12,
sex:'boy',
email:'nimei'
}
];
tpl.render(); //自动渲染整个网页中的<script type="tpl">模板
var tplText= "<ul>\n"
+"for(var i=0;i<tplData;i++){\n"
+ "<li>@i</li>\n"
+"}\n"
+ "<ul>\n";
/*
var func = tpl.func(tplText); //将模板编译成一个函数,模板里面通过D变量获取参数
var html = func(12);//调用模板函数,并传递参数12,在模板里面D就是12
document.getElementById('result').innerHTML=html; //将生成的html设置为网页
*/
var html = tpl.html(tplText,12);//直接传递模板与参数,获取html
document.getElementById('result').innerHTML=html;
document.write("时间:"+ (new Date().getTime()-beg).toString() +"毫秒");
</script>
</body>
</html>
##API
tpl.html(tplText,daata)
通过传递tplText模板,和数据data直接获取模板生成的html代码。
tpl.func(tplText)
将tplText编译为一个函数,该函数参数在模板中通过D参数引用。 调用后返回模板编译后的html代码。
tpl.render(nodes,finishCallBack)
自动渲染整个网页中的<script type="tpl">标签中的模板。并能保证html dom中原有的结构。相当于替换掉了原来的<script type="tpl">标签,如果不想该模板被渲染,增加norender属性即可。 如果未传入nodes,则渲染所有<script type="tpl">标签, 如果传入nodes则只选择nodes标签,并忽略norender属性
tpl.serv(tplUrl,data,callback)
通过传递模板地址,和数据,获取模板生成的html代码, callback第一个参数就是编译后的html代码
###最后 上面的文档包括了tpl.js所有的语法了,欢迎大家测试与反馈。 源码地址:https://git.oschina.net/tianqiq/tpl.js
此处可能存在不合适展示的内容,页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容,可点击提交进行申诉,我们将尽快为您处理。
1. 开源生态
2. 协作、人、软件
3. 评估模型