语法
- 首先同样是引入template.js
<script src="template.js"></script>
- 在结构中随便创建个div
<div id="div1"></div>
- 创建模板(简洁的语法)
<script id="content" type="text/html">
{{if isAdmin}}
<h1>{{title}}</h1>
<ul>
{{each list as value index}}
<li>索引:{{index}}:{{value}}</li>
{{/each}}
</ul>
{{/if}}
</script>
- 创建模板(原生语法)
<%if (isAdmin) {%>
<h1><%=title%></h1>
<ul>
<%for (var i = 0; i < list.length; i++) {%>
<li>索引:<%i%>:<%list[i]%></li>
<%}%>
</ul>
<%}%>
* 数据 (数据一般是从后台获取)
<script>
var data = {
title: "hello world",
isAdmin: true,
list: ['新闻','军事','历史','政治']
};
var html = template('content',data);
document.getElementById('div1').innerHTML = html;
</script>
> 注意:简洁语法引用的js为(template.js),原生语法引用的js为(template-native.js)
参考网址:https://github.com/aui/artTemplate
网友评论