bower install artTemplate --save
https://github.com/aui/artTemplate
快速上手
模板定义：
<div id="content"></div>
<script
id="test" type="text/html">
{{if isAdmin}}
<h1>{{title}}</h1>
<ul>
{{each list as value i}}
<li>索引 {{i + 1}} ：{{value}}</li>
{{/each}}
</ul>
{{/if}}
</script>
function(item,index)
数据绑定
<script src="../dist/template.js"></script>
<script>
var data = {
title: '基本例子',
isAdmin: true,
list: ['文艺', '博客', '摄影', '电影', '民谣', '旅行', '吉他']
};
var html = template('test', data);
document.getElementById('content').innerHTML = html;
</script>
语法说明
1. 版本
有两个版本的模板语法可以选择
简洁语法
推荐使用，语法简单实用，利于读写，使用template.js。
{{if admin}}
{{include 'admin_content'}}
{{each list}}
<div>{{$index}}. {{$value.user}}</div>
{{/each}}
{{/if}}
原生语法
使用template-navative.js
<%if (admin){%>
<%include('admin_content')%>
<%for (var i=0;i<list.length;i++) {%>
<div><%=i%>. <%=list[i].user%></div>
<%}%>
<%}%>
2. 显示属性
<h3> <span class=”{{title}}”></span></h3>
#代表属性不转义，会按照原始串输出，如果是标签会被解析成dom
<h3>{{#title}}</h3>
3. 判断
{{if isAdmin}}
<h1>{{title}}</h1>
{{/if}}
{{if isAdmin}}
<h1>{{title}}</h1>
{{else}}
<div>{{message}}</div>
{{/if}}
{{if type==1}}
<h1>{{title}}</h1>
{{/if}}
4. 循环
{{each list as value i}}
<li>索引 {{i + 1}} ：{{value}}</li>
{{/each}}
{{each list}}
<li>索引 {{$index}} ：{{$value}}</li>
{{include ‘test’ }}
{{/each}}
{{each data}}
<tr>
<td >{{$value.agent_name}}</td>
<td >{{$value.agent_id}}</td>
<td >{{$value.type}}</td>
<td >
{{each $value.items}}
<span>{{$value}}</span>
{{/each}}
<td>
<tr>
{{/each}}
5. 引入
引入id为list的模板
{{include 'list'}}
模板定义
6. 使用type=“text/html”的script标签
<script id="list" type="text/html">
<ul>
{{each list as value i}}
<li>索引 {{i + 1}} ：{{value}}</li>
{{/each}}
</ul>
</script>
7. 使用js的变量存储模板
var source = '<ul>'
+ '{{each list as value i}}'
+ '<li>索引 {{i + 1}} ：{{value}}</li>'
+ '{{/each}}'
+ '</ul>';
var source = '
<ul>
{{each list as value i}}
<li>索引 {{i + 1}} ：{{value}}</li>
{{/each}}
</ul>
';
方法
注意：各个方法传递的数据必须是具有属性的对象,不能是数组
{data:{}} 或者{data:[]}
8. template(id, data)
根据 id 渲染模板。内部会根据document.getElementById(id)查找模板。
如果没有 data 参数，那么将返回一渲染函数。
<ul id="list"></ul>
<script id="list-temp" type="text/html">
{{each list}}
<li>
<img src="{{$value.img}}" alt="">
<h3>{{$value.title}}</h3>
<p>{{$value.time}}</p>
</li>
{{/each}}
</script>
<script>
var data={
list:[
{img:'1.jpg',title:'javascript',time:'2014-11-01'},
{img:'2.jpg',title:'css3',time:'2015-11-01'},
{img:'3.jpg',title:'html5',time:'2016-11-01'}
]
}
document.querySelector('#list').innerHTML=template('list-temp',data);
</script>
9. template.compile(source)
template.compile()接收模板字符串，会返回一个函数，使用该函数传入数据构建html
<ul id="list"></ul>
<script>
var source='
{{each list}}
<li>
<img src="{{$value.img}}" alt="">
<h3>{{$value.title}}</h3>
<p>{{$value.time}}</p>
</li>
{{/each}}
';
var data={
list:[
{img:'1.jpg',title:'javascript',time:'2014-11-01'},
{img:'2.jpg',title:'css3',time:'2015-11-01'},
{img:'3.jpg',title:'html5',time:'2016-11-01'}
]
}
var render = template.compile(source);//返回一个函数
var html = render(data);
//var html= template.compile(source)(data);
document.querySelector('#list').innerHTML=html;
</script>
10. template.helper(name, callback)
添加辅助方法。
<ul id="list"></ul>
<script id="list-temp" type="text/html">
{{each list}}
<li>
<p>{{$value.state | state}}</p>
<h3>{{$value.title}}</h3>
<p>{{$value.remark | subStr:15}}</p>
</li>
{{/each}}
</script>
<script>
template.helper('state',function (value) {
if(value==0){
return '禁用'
}else{
return '启用'
}
})
template.helper('subStr',function (value,num) {
return value.substr(0,num)+'...';
})
</script>
<script>
var data={
list:[
{state:'1',title:'javascript',remark:'artTemplate 是新一代 javascript 模板引擎，它在 v8 中的渲染效率可接近 javascript 性能极限'},
{state:'1',title:'css3',remark:'在 chrome 下渲染效率测试中分别是知名引擎 Mustache 与 micro tmpl 的 25 、 32 倍（性能测试）'},
{state:'0',title:'html5',remark:'另外，artTemplate 的模板还支持使用自动化工具预编译，这一切都在 2KB(Gzip) 中实现'}
]
}
document.querySelector('#list').innerHTML=template('list-temp',data);
</script>
handerbar
https://github.com/wycats/handlebars.js/
这种方式的的缺点是，模板通过字符串拼接，不好维护，适合简单模板。