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

?

轉載于:https://www.cnblogs.com/codebook/p/10070200.html

總結

以上是生活随笔為你收集整理的art-template在项目中的应用的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。