JS模板引擎art-template

art-template 是一个简约、超快的模板引擎。
它采用作用域预声明的技术来优化模板渲染速度,从而获得接近 JavaScript 极限的运行性能,并且同时支持 NodeJS 和浏览器。

文档地址:https://aui.github.io/art-template/docs/index.html

gitHub地址:
https://github.com/aui/art-template

使用例子在github的example中有。

通常,在不借助模板引擎Ajax查询数据列表,需要自己手动拼写N多个tr和td。
比如:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
$.get("${ctx}/student/list",function(r) {
if (r.returncode == 0) {
if (r.data) {
var t = $('#list tbody').empty();
for (var i=0;i< r.data.length;i++) {
var item = r.data[i];
var tr = "<tr><td>"+ (i+1)+"</td><td>" + item.name + "</td><td>" + item.age + "</td><td>" + item.scoreSum+ "</td><td>"+ item.scoreAvg + "<td></tr>";
t.append($(tr));
}
}
}
else {
layer.alert(r.errmsg);
}
});

使用JS模板引起后:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<script type="text/javascript" src="${ctx}/asset/js/art-template/template-web.js"></script>
<script id="template" type="text/html">
{{each data item index}}
<tr>
<td>{{index+1}}</td>
<td>{{item['name']}}</td>
<td>{{item['age']}}</td>
<td>{{item['score_sum']}}</td>
<td>{{item['score_avg']}}</td>
</tr>
{{/each}}
</script>
// 获取模板内容字符串
var templateHtml = $('#template').html();
// 编译模板
var render = template.compile(templateHtml);
$('#queryAll').click(function () {
$.get("${ctx}/student/list", function (r) {
if (r.returncode == 0) {
if (r.data) {
// 渲染模板
var html = render(r);
$('#list tbody').html(html);
}
}
else {
layer.alert(r.errmsg);
}
});
});

Donny wechat
欢迎关注我的个人公众号
打赏,是超越赞的一种表达。
Show comments from Gitment