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;
});