模板插件aTpl.js新增功能

摘要:

  aTpl.js是一款模板插件,該插件支持ie5+,chrome等瀏覽器以及移動端瀏覽器,支持for和if語法,以及表達式。最近對aTpl.js模板插件增長了新的功能,支持字符串模板,同時增長了模板緩存功能。html

項目地址:https://github.com/baixuexiyang/aTplgit

性能測試:http://baixuexiyang.github.io/aTpl/doc/perform.htmlgithub

實例:

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;
    });
相關文章
相關標籤/搜索