摘要: aTpl.js是一款模板插件,該插件支持ie5+,chrome等瀏覽器以及移動端瀏覽器,支持for和if語法,以及表達式。最近對aTpl.js模板插件增加了新的功能,支持字元串模板,同時增加了模板緩存功能。 項目地址:https://github.com/baixuexiyang/aTpl ...
摘要:
aTpl.js是一款模板插件,該插件支持ie5+,chrome等瀏覽器以及移動端瀏覽器,支持for和if語法,以及表達式。最近對aTpl.js模板插件增加了新的功能,支持字元串模板,同時增加了模板緩存功能。
項目地址:https://github.com/baixuexiyang/aTpl
性能測試:http://baixuexiyang.github.io/aTpl/doc/perform.html
實例:
var data = { name: '測試', sex: 1, contact: [{ name: '張三', sex: 1 }, { name: '李四', sex: 2 }] }; var temp = "{{@ for(var i = 0, _l = aTpl.contact.length; i < _l; i++){ }}\ {{@ if(aTpl.contact[i].name==='張三' ) { }}\ <li>\ <span>姓名:{{ aTpl.contact[i].name + '條件輸出' }}</span>\ <span>性別:{{ aTpl.contact[i].sex===1 ? '男': '女' }}</span>\ </li>\ {{@ } else { }}\ <li>\ <span>姓名:{{ aTpl.contact[i].name }}</span>\ <span>城市:{{ aTpl.contact[i].sex===1 ? '男': '女' }}</span>\ </li>\ {{@ } }} {{@ } }}"; aTpl.template(temp).render(data, function(html) { document.getElementById('demo').innerHTML = html; });