art-template在项目中的应用
2024-08-31 07:17:26
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;
});
最新文章
- 基于DotNetOpenAuth的OAuth实现示例代码: 获取access token
- Bootstrap之选项卡
- 40GbE网络之后
- LL LR SLR LALR 傻傻分不清
- 【WP开发】JSON数据的读与写
- 构建自己的PHP框架--构建缓存组件(1)
- JavaScript模块化
- javascript必知必会:面象对象编程
- [转]IIS添加MIME扩展类型及常用的MIME类型列表
- Python之路【第十六篇续】Django进阶篇
- reactjs 注意点
- 万能脚本助Web执行底层Linux命令
- 【转】Android 4.3源码的下载和编译环境的安装及编译
- Java笔记(十二)&hellip;&hellip;类中各部分加载顺序及存放位置问题
- django 序列化json问题
- 执行CMD命令
- Linux下安装配置词典GoldenDict
- chown 命令详解
- pyspark列合并为一行
- 关于PCB走线能不能走锐角的讨论
热门文章
- iOS开发中的单元测试(三)——URLManager中的测试用例解析
- 分治分块与计算几何练习 [Cloned]
- 1367: [Baltic2004]sequence
- 【BZOJ1042】[HAOI2008]硬币购物 容斥
- React + webpack 环境配置
- Ubuntu环境下配置Android Studio【转】
- HDU5171 GTY&#39;s birthday gift —— 矩阵快速幂
- js程序开发-3
- html5--5-7 绘制圆/弧
- 腾讯Hermes设计概要——数据分析用的是列存储,词典文件前缀压缩,倒排文件递增id、变长压缩、依然是跳表-本质是lucene啊