用artTemplate已經(jīng)有一段時間了茂缚，也是在比較了幾款前端模版引擎之后決定使用它，因為它的使用方便以及性能卓越，所以一直使用延赌，關(guān)于它的介紹以及性能大家可以移步http://cdc.tencent.com/?p=5723耽梅。
今天這里主要是說下其使用方式薛窥，光說不練也是沒有任何效果的。artTemplate的github是：https://github.com/aui/artTemplate眼姐，大家有需要深度了解的可以去看看诅迷，上面有其簡單的使用方法，這里我結(jié)合自己的使用擴(kuò)展下妥凳。
artTemplate的庫分為兩種竟贯，一個是template.js，一個是template-native.js,第一個是簡潔語法版逝钥，第二個是原生語法（感覺像JSP）版屑那，兩個庫的語法是不一樣的，大家不要混用艘款，否則會報錯的持际。下面這兩種分別做使用說明：
1.簡潔語法版：
[javascript] view plain copy
</pre><pre name="code" class="javascript"><script id="test" type="text/html">
{{if admin}}
{{each list as value index}}
<div>{{index}}:{{value}}</div>
{{/each}}
{{else if}}
條件判斷
{{/if}}
</script>
2.原生語法版：
[javascript] view plain copy
<script id="test" type="text/html">
<%if(admin){%>
<% for(var i=0; i<list.length; i++){%>
<div><%=i%>:<%=list[i].value%></div>
<%}%>
<%}else{%>
<div>沒有結(jié)果！</div>
<%}%>
</script>
然后在JS中：
[javascript] view plain copy
var data = {
list : ["第一個元素","第二個元素"]
};
var html = template.render('test',data);
document.getElementById("content").innerHTML = html;
這里放在html中的用法哗咆，當(dāng)然artTemplate還提供了放在javascript文件的中方法蜘欲，這里需要定義一個變量把模版裝起來，然后artTemplate會獲取這個變量的模版內(nèi)容進(jìn)行渲染：
[javascript] view plain copy
var apply_list = '{{each list as his}}'+
'<li data-apply-id="{{his.id}}">'+
'<ul class="shop-attr-lst group">'+
'<li>店鋪名:<a href="javascript:;">{{his.shop_name}}</a></li>'+
'<li>賬戶余額：{{his.shop_balance}}元</li>'+
'</ul>'+
'</li>'+
'{{/each}}';
然后在JS中：
[javascript] view plain copy
var data = {
list:[
{"id":1,"shop_name":"123","shop_balance":5000},
{"id":2,"shop_name":"12344","shop_balance":500}
]
}
var render = template.compile(apply_list);
var html = render(data);
$("#content").html("").html(html);
當(dāng)然這些只是artTemplate最基礎(chǔ)的用法晌柬，artTemplate還有更多的功能等你去發(fā)現(xiàn)姥份，有了它郭脂，前端開發(fā)越來越流暢了！
