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/
這種方式的的缺點是，模板通過字符串拼接，不好維護，適合簡單模板。