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。
比如:
$.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模板引起后:
<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);
}
});
});