art-template在項目中的應用

art-template 是一個簡約、超快的模板引擎。它採用做用域預聲明的技術來優化模板渲染速度，從而得到接近 JavaScript 極限的運行性能，而且同時支持 NodeJS 和瀏覽器。

下面介紹在項目中的使用方法，此處使用的時原生語法：

1.引入文件

<script src="../assets/artTemplate/template-native.js"></script>

2.1建立模板在HTML中（使用zepto或者jQuery對象遍歷）

<script type="text/template" id="cartTemplate">
    <% var $ = getZepto(); %>
    <% $.each(data, function(i, item){ %>
    <li class="mui-media">
        <input type="checkbox" data-price="<%=item.price%>" data-num="<%=item.num%>">
    </li>
    <% }) %>
</script>

2.2建立模板在HTML中（使用js原生語法遍歷）

<script type="text/template" id="cartTemplate">
    <% for(var i=0; i<data.length; i++){ %>
    <% var item = data[i] %>
    <li class="mui-media">
        <input type="checkbox" data-price="<%=item.price%>" data-num="<%=item.num%>">
    </li>
    <% } %>
</script>

3.導入數據，從接口獲取數據data後直接放到template中，也能夠使用對象eg：{list: data}代替data。（注意cartTemplate是模板id）

$('.mui-table-view').html(template('cartTemplate', data));

4.備註

4.1 art-template內部不能使用外部變量，如需使用外部變量能夠使用template.helper(name, callback)方法。

4.2 好比2.1中使用了zepto對象，如何引入這個對象的呢？在你的js文件中添加下面的方法，而後在模板中調用一下就好了：（一樣的方法也可引入jQuery或其餘對象）

template.helper('getZepto', function (){
    return Zepto;
});