前端arttemplate模板引擎的用法

原生语法

使用原生语法，需要导入template-native.js文件。

在HTML中定义模板，注意模板的位置，不要放到被渲染区域，防止模板丢失。

<% for (var i = 0; i < products.length; i ++) { %>

<% var product =products[i]; %>

<% if (i < 3) { %>

2015-02-09

<%=product.name%>

<%=product.description%>

¥ <%=formatPrice(product.promoPrice,'integer')%><%=formatPrice(product.promoPrice,'decimal')%>

<% } %>

<% } %>

template(id, data)

渲染数据到页面

$('#main_panel').html(template('main_panel_big_sale_template', data));

简洁语法

使用简洁语法，导入template.js文件。

{{each products as product i}}

{{if i < 3}}

2015-02-09

{{product.name}}

{{product.description}}

¥ {{product.price.value | formatPrice: 'integer'}}{{product.price.value | formatPrice: 'decimal'}}

{{/if}}

{{/each}}

渲染数据到页面，和原生语法一样

$('#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 = '

'

+    '<% for (var i = 0; i < list.length; i ++) { %>'

+        '

索引 <%= i + 1 %> ：<%= list[i] %>

'

+    '<% } %>'

+ '';

var render = template.compile(source);

var html = render({list: ['摄影', '电影', '民谣', '旅行', '吉他']});

document.getElementById('content').innerHTML = html;

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

作者：ilaoke

链接：http://www.jianshu.com/p/483fa7f6f55b

來源：

著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。