js模板引擎-art-template常用总结

art-template

javascript 模板引擎，官网：

https://aui.github.io/art-template/docs/installation.html#

分为原生语法和简洁语法，本文主要是讲简洁语法

基础数据渲染

输出HTML

流程控制

遍历

调用自定义函数方法

子模板引入

基础数据渲染

一、引入art-template.js文件

<script src="template-debug.js"></script>

二、编写HTML模板

<script id="test" type="text/html">
<h1>{{title}}</h1>
</script>

<div id="scroller">

</div>

三、向模板插入数据，并输出到页面

$.getJSON("url",function(dataJson){
console.log(dataJson);
var data = dataJson;
var html = template('test',data);

document.getElementById("scroller").innerHTML = html;
})

输出HTML

<script id="test" type="text/html">
<h1>{{title}}</h1>
</script>

循环遍历语句

{{each name}}
索引：{{$index}}
值：{{$value}}
{{/each}}

{{if Status}}
{{each obj.Top_10 as value}}
<tr>
<td>
{{if $index >2}}

4000
{{$index +1}}
{{/if}}
</td>
<td>{{value.UserName}}</td>
<td>{{value.InvestMoney}}</td>
<td>{{value.percent}}%</td>
</tr>
{{/each}}
{{/if}}

数据样式



流程控制语句（if else）

{{if value}}

…

{{else if value}}

…

{{else}}

…

{{/if}}

art-template里面的流程控制就相对其他模板来说强大很多了，直接看例子吧

<script id="test" type="text/html">
<div>
{{if bok==22}}
<h1>线上</h1>
{{else if bok==33}}
<h2>隐藏</h2>
{{else}}
<h3>走这里</h3>
{{/if}}
</div>
</script>

<script>
var data = {
"bok":22
};
var html = template('test',data);
document.getElementById("app").innerHTML = html;
</script>

文章链接/好的文章

http://www.cnblogs.com/shiyou00/p/6841801.html

http://blog.csdn.net/yzi_angel/article/details/53260151