artTemplate的使用总结
原生语法
使用原生语法,需要导入template-native.js
文件。
在HTML中定义模板,注意模板的位置,不要放到被渲染区域,防止模板丢失。
<script id="main_panel_big_sale_template" type="text/html">
<% for (var i = 0; i < products.length; i ++) { %>
<% var product =products[i]; %>
<% if (i < 3) { %>
<li>
<img src="<%=getImageUrl(product.pictographicIconList[0].image.url)%>" data-imgname="<%=product.pictographicIconList[0].image.url%>">
<div class="flash-time-box">
<span>2015-02-09</span>
</div>
<strong class="marque"><%=product.name%></strong>
<strong class="libelle"><%=product.description%></strong>
<div class="no-picto">
<span class="prod-tip">
<img src="img/grey.png" data-original="img/icon.png">
</span>
<span class="italic black">
<span class="cny-curr">¥ <%=formatPrice(product.promoPrice,'integer')%></span><span class="decimal"><%=formatPrice(product.promoPrice,'decimal')%></span>
</span>
</div>
</li>
<% } %>
<% } %>
</script>
template(id, data)
渲染数据到页面
$('#main_panel').html(template('main_panel_big_sale_template', data));
简洁语法
使用简洁语法,导入template.js
文件。
<script id="main_panel_big_sale_template" type="text/html">
{{each products as product i}}
{{if i < 3}}
<li>
<img src="{{product.pictographicIconList[0].image.url | getImageUrl}}" data-imgname="{{product.pictographicIconList[0].image.url}}">
<div class="flash-time-box">
<span>2015-02-09</span>
</div>
<strong class="marque">{{product.name}}</strong>
<strong class="libelle">{{product.description}}</strong>
<div class="no-picto">
<span class="prod-tip">
<img src="img/grey.png" data-original="img/icon.png">
</span>
<span class="italic black">
<span class="cny-curr">¥ {{product.price.value | formatPrice: 'integer'}}</span><span class="decimal">{{product.price.value | formatPrice: 'decimal'}}</span>
</span>
</div>
</li>
{{/if}}
{{/each}}
</script>
渲染数据到页面,和原生语法一样
$('#main_panel').html(template('main_panel_big_sale_template', data));
调用外部函数
template.helper
上面的例子中,都调用了formatPrice
函数,要调用此函数需要通过helper方法注册:
template.helper('formatPrice', function(price, type) {
if(price){
var arrayPrice = price.toString().split(".");
if(type == 'integer') {
return arrayPrice[0]?arrayPrice[0]:"0";
}else if (type =='decimal') {
return arrayPrice[1]?arrayPrice[1].length == 1?"."+arrayPrice[1]+"0":"."+arrayPrice[1]:".00";
}
}else{
if(type == 'integer') {
return "0";
}else if (type =='decimal') {
return ".00";
}
}
});
原生语法与简洁语法比较
语法类型 | 调用外部函数 |
---|---|
原生 | <%=formatPrice(product.promoPrice,'integer')%> |
简洁 | {{product.price.value | formatPrice: 'integer'}} |
简洁语法的传参有点奇怪,原生语法就很好理解,如果要传递三个参数,简洁语法该怎么写呢?
简洁语法的循环如果要做更多逻辑,也实现不了。
推荐使用原生语法
template.compile
模板可以直接写在JS中,再编译渲染。
var source = '<ul>'
+ '<% for (var i = 0; i < list.length; i ++) { %>'
+ '<li>索引 <%= i + 1 %> :<%= list[i] %></li>'
+ '<% } %>'
+ '</ul>';
var render = template.compile(source);
var html = render({list: ['摄影', '电影', '民谣', '旅行', '吉他']});
document.getElementById('content').innerHTML = html;
这种方式的的缺点是,模板通过字符串拼接,不好维护,适合简单模板
原文链接:http://www.jianshu.com/p/483fa7f6f55b
著作权归作者所有,转载请联系作者获得授权,并标注“简书作者”。
artTemplate的使用总结的更多相关文章
- 性能卓越的js模板引擎--artTemplate
artTemplate能够将数据与View视图的分离,充分利用 javascript 引擎特性,使得其性能无论在前端还是后端都有极其出色的表现. 在 chrome 下渲染效率测试中分别是知名引擎 Mu ...
- JavaScript模板引擎artTemplate.js——结语
再次首先感谢模板的作者大神,再次放出github的地址:artTemplate性能卓越的js模板引擎 然后感谢博客园的一位前辈,他写的handlebars.js模板引擎教程,对我提供了很大的帮助,也是 ...
- 【JavaScript】ArtTemplate个人的使用体验。
据说ArtTemplate是腾讯的,感觉这东西真不错,使用方便,用起来很简单,哈哈.腾讯也不完全只是坑爹啊. ArtTemplate 使用是,正常引入js,这个自然不用说.这东西啥时候使用呢?我觉得这 ...
- JS 模板引擎 BaiduTemplate 和 ArtTemplate 对比及应用
最近做项目用了JS模板引擎渲染HTML,JS模板引擎是在去年做项目是了解到的,但一直没有用,只停留在了解层面,直到这次做项目才用到,JS模板引擎用了两个 BaiduTemplate 和 ArtTemp ...
- artTemplate模板引擎学习实战
在我的一篇关于智能搜索框异步加载数据的文章中,有博友给我留言,认为我手写字符串拼接效率过低,容易出错.在经过一段时间的摸索和学习之后,发现现在拼接字符串的方法都不在是自己去书写了,而是使用Javasc ...
- JavaScript模板引擎artTemplate.js——两种方法实现性别的判定
template.helper(name, callback) name:必传,辅助事件的名称. callback:必传,辅助事件的回调函数. return:undefined 所谓的辅助事件,主要用 ...
- JavaScript模板引擎artTemplate.js——如何引入模板引擎?
artTeamplate.js在github上的地址:artTemplate性能卓越的js模板引擎 引入模板引擎,就是引入外部javascript啦,并且artTemplate.js不依赖其他第三方库 ...
- JavaScript模板引擎artTemplate.js——为什么使用模板引擎?
作为一个工作一年的菜鸟,在公司做了几个外包项目,也接触到了不同形式的web开发.其实也没多少,就是javaweb开发和HTML5移动开发,这两者在页面展示的时候的解决方案还是有所不同的. 1.vo+e ...
- artTemplate 自动化编译之tmod
一.背景 前端小白的成长历程,一般都会经历html模板的一些问题,jquery template/artTemplate/yayaTemplate等常见的模板使用,这里就不作介绍了. 先谈谈我们为什么 ...
- artTemplate里一个比不上jQuery tmpl模板的地方就是放一个数组进去它不会自动循环.
artTemplate里一个比不上jQuery tmpl模板的地方就是放一个数组进去它不会自动循环.
随机推荐
- 设置tabbar的角标与第三方库Masonry的基本使用
// 设置tabbar的角标 [[[[[self tabBarController] viewControllers] objectAtIndex: 0] tabBarItem] setBadgeVa ...
- Xcode 7真机测试详解
1.准备 注意:一定要让你的真机设备的系统版本和app的系统版本想对应,如果不对应就会出现一个很常见的问题:could not find developer disk image 首先,准备好下面的设 ...
- ejs 基本语法
1.基本语法.<% code %> 无缓冲的条件语句元素.<%= code %> 转义HTML,该code并且会打印出来.<%- code %> ...
- 基于CDH5.x 下面使用eclipse 操作hive 。使用java通过jdbc连接HIVESERVICE 创建表
基于CDH5.x 下面使用eclipse 操作hive .使用java通过jdbc连接HIVESERVICE 创建表 import java.sql.Connection; import java.s ...
- Android 学习手札(二) 活动(Activity)组件
1.建立和配置Activity 建立Android工程时已经自动生成了一个默认的Activity,同时也生成了很多与Activity相关的文件,例如,res目录中的XML及图像文件.AndroidMa ...
- Java学习----HashMap原理
1.HashMap的数据结构 数组的特点是:寻址容易,插入和删除困难:而链表的特点是:寻址困难,插入和删除容易.那么我们能不能综合两者的特性,做出一种寻址容易,插入删除也容易的数据结构?答案是肯定的, ...
- 用python选择及显示三级目录,可返回上层目录以及随时跳出。
# -*- coding: utf-8 -*-"""Created on Fri Jul 29 09:43:38 2016 @author: yinggang" ...
- CentOS下命令行和桌面模式的切换方法(转载)
桌面模式和命令行模式的切换方法 用编辑器打开 /etc/inittab 文件(这里用的是vi,你可以选择你喜欢的): #vi /etc/inittab 打开效果图如下: 桌面模式 : 把光标所在 ...
- protocol(协议) 和 delegate(委托)也叫(代理)---辨析
protocol和delegate完全不是一回事. 协议(protocol),(名词)要求.就是使用了这个协议后就要按照这个协议来办事,协议要求实现的方法就一定要实现. 委托(delegate),(动 ...
- xcode 工具 alcatraz---备用
简介 Alcatraz 是一个帮你管理 Xcode 插件.模版以及颜色配置的工具.它可以直接集成到 Xcode 的图形界面中,让你感觉就像在使用 Xcode 自带的功能一样. 安装和删除 使用如下的命 ...