art-template 是一個(gè)簡(jiǎn)約、超快的模板引擎。它采用作用域預(yù)聲明的技術(shù)來(lái)優(yōu)化模板渲染速度，從而獲得接近 JavaScript 極限的運(yùn)行性能，并且同時(shí)支持 NodeJS 和瀏覽器。

下面介紹在項(xiàng)目中的使用方法，此處使用的時(shí)原生語(yǔ)法：

1.引入文件

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

2.1創(chuàng)建模板在HTML中（使用zepto或者jQuery對(duì)象遍歷）

<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創(chuàng)建模板在HTML中（使用js原生語(yǔ)法遍歷）

<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.導(dǎo)入數(shù)據(jù)，從接口獲取數(shù)據(jù)data后直接放到template中，也可以使用對(duì)象eg：{list: data}代替data。（注意cartTemplate是模板id）

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

4.備注

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

4.2 比如2.1中使用了zepto對(duì)象，如何引入這個(gè)對(duì)象的呢？在你的js文件中添加下面的方法，然后在模板中調(diào)用一下就行了：（同樣的方法也可引入jQuery或其他對(duì)象）

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

?

轉(zhuǎn)載于:https://www.cnblogs.com/codebook/p/10070200.html

總結(jié)

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

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。