提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  工具

当前栏目

art-template在项目中的应用

应用项目 Template art
2023-09-11 14:15:07 时间

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

 

相关文章