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">¥&nbsp;<%=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">¥&nbsp;{{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;

这种方式的的缺点是，模板通过字符串拼接，不好维护，适合简单模板。

arttemplate嵌套循环，包含调用外部函数，直接看例子：

{{each data.results}}
<div class="col-lg-3 col-md-3 col-sm-3 col-xs-3 ana_btn3"><div class="thumbnail" style="border: 0 solid white">{{if $value.thumbnail == null}}<img src="" alt="Responsive image" style="width: 99%">{{else}}<img src="{{}}" alt="Responsive image" style="width: 99%">{{/if}}<div class="caption"><h3 style="color: #1b6d85; text-align: center">{{$value.title}}</h3>{{if $value.snippet == null}}<p class="" style="color: #777777;height: 40px;overflow: hidden;text-overflow: ellipsis;text-align: center">无摘要</p>{{else}}<p class="" style="color: #777777;height: 40px;overflow: hidden;text-overflow: ellipsis;text-align: center">{{$value.snippet}}</p>{{/if}}{{each $value.tags as tag i}}{{if tag === option.panelLeftTree.sites[0].nodes[0].zhName}}<p style="margin-top: 20px;text-align: center"><a  class="btn btn-primary" role="button" id="showDetails" οnclick="detailsShow()">查看详细信息</a><a style="margin-left: 10px;color:#5AC8FA;cursor:pointer" href="{{option.webmapPortal + $value.id}}" target="_blank"  class="btn btn-default" role="button" id="mapOpen" >在地图中查看</a></p>{{/if}}{{if tag === option.panelLeftTree.sites[0].nodes[1].zhName}}<p style="margin-top: 20px;text-align: center"><a  class="btn btn-primary" role="button" id="showDetails" οnclick="detailsShow()">查看详细信息</a><a style="margin-left: 10px;color:#5AC8FA;cursor:pointer" href="{{option.sencePortal + $value.id}}" target="_blank"  class="btn btn-default" role="button" id="mapOpen" >在地图中查看</a></p>{{/if}}{{if tag === option.panelLeftTree.sites[0].nodes[2].zhName}}<p style="margin-top: 20px;text-align: center"><a  class="btn btn-primary" role="button" id="showDetails" οnclick="detailsShow()">查看详细信息</a><a style="margin-left: 10px;color:#5AC8FA;cursor:pointer" href="{{option.chartVisual + $value.id}}" target="_blank"  class="btn btn-default" role="button" id="mapOpen" >在地图中查看</a></p>{{/if}}{{if tag === option.panelLeftTree.sites[0].nodes[3].zhName}}<p style="margin-top: 20px;text-align: center"><a  class="btn btn-primary" role="button" id="showDetails" οnclick="detailsShow()">查看详细信息</a><a style="margin-left: 10px;color:#5AC8FA;cursor:pointer" href="{{option.gangedVisual + $value.id}}" target="_blank"  class="btn btn-default" role="button" id="mapOpen" >在地图中查看</a></p>{{/if}}{{/each}}<p style="color: #dddddd; margin-top: 20px;text-align: center" id="fomateTime">{{formatDate($value.modified)}}</p></div></div>
</div>
{{/each}}

var irender = template.compile(info);
var ihtmlItem = irender(infoData);

$("#testView").html(ihtmlItem);

artTemplate的使用总结相关推荐

腾讯的模板引擎---artTemplate
主要方法如下5种,在此不详细说artTemplate的方法,主要记录三种使用artTemplate的方法. template(id, data) 根据 id 渲染模板.内部会根据document.ge ...
lodop+art-template实现web端漂亮的小票样式打印
一. 现状由于之前采用Lodop打印控件(商业版付费,可以使用免费版但是会有水印)去打印小票,是一行一行的打印,但是不满足UI给到复杂布局的小票样式,所以得重新考虑如何来实现. 二. 介绍 art ...
artTemplate使用
bower install artTemplate --save https://github.com/aui/artTemplate 快速上手模板定义: <div id="co ...
WinJS实用开发技巧（2）：使用artTemplate打造对话列表
WinJS中提供了列表控件ListView,但是对于一些有一些逻辑判断的处理不是十分友好,我们可以使用JavaScript中的模版机制来自己生成列表,然后添加到DOM中.今天要讲的是artTempla ...
art-template在项目中的应用
art-template 是一个简约.超快的模板引擎.它采用作用域预声明的技术来优化模板渲染速度,从而获得接近 JavaScript 极限的运行性能,并且同时支持 NodeJS 和浏览器. 下面介绍在 ...
artTemplate基本用法
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8" ...
lodop 小票排版_lodop+art-template实现web端漂亮的小票样式打印
一. 现状由于之前采用Lodop打印控件(商业版付费,可以使用免费版但是会有水印)去打印小票,是一行一行的打印,但是不满足UI给到复杂布局的小票样式,所以得重新考虑如何来实现. 二. 介绍 art ...
node --- 在express中配置使用模板引擎(art-template)
下载依赖: npm install --save art-template express-art-template 配置: // app.js const express = require(&qu ...
必须掌握的前端模板引擎之art-template
常用的模板引擎有tpl.js.baiduTemplate.doT.js.art-template等等: 我所理解的模板引擎就是把js数据传到html中展示出来: art-template 是一个简约. ...