<body>
<div class="box"></div>
<script src="D:/wamp/www/lib/jquery/jquery-1.12.4.min.js"></script>
<script src="D:/wamp/www/lib/artTemplate/template.js"></script>
<script type="text/html" id="test">
{{each arr as obj i}}
<p>arr中第{{i+1}}个对象信息:</p>
{{each obj as v attr}}
<div>{{attr}}:{{v}}</div>
{{/each}}
{{/each}}
</script>
<script>
let data = {
arr: [
{name: "obj1", id: "1"},
{name: "obj2", id: "2"}
]
}
let html = template("test", data)
$(".box").html(html);
</script>
</body>
https://github.com/aui/art-template
artTemplate 简洁语法(标准语法)
引用简洁语法的引擎版本,例如:
<script src="dist/template.js"></script>
输出表达式
对内容编码输出:
{{content}}
不编码输出:
{{#content}}
条件表达式
{{if admin}}
<p>admin</p>
{{else if code > 0}}
<p>master</p>
{{else}}
<p>error!</p>
{{/if}}
遍历表达式
无论数组或者对象都可以用 each 进行遍历。
{{each list as value index}}
<li>{{index}} - {{value.user}}</li>
{{/each}}
亦可以被简写:
{{each list}}
<li>{{$index}} - {{$value.user}}</li>
{{/each}}
模板包含表达式
用于嵌入子模板。
{{include 'template_name'}}
子模板默认共享当前数据,亦可以指定数据:
{{include 'template_name' news_list}}