jquery html 模板引擎,基于jQuery的JavaScript模版引擎JsRender使用指南

前言

JsRender是一款基于jQuery的JavaScript模版引擎，它具有如下特点：

·  简单直观

·  功能强大

·  可扩展的

·  快如闪电

这些特性看起来很厉害，但几乎每个模版引擎，都会这么宣传。。。

由于工作需要，小菜才接触到此款模版引擎。使用了一段时间，发现它确实比较强大，但小菜觉得有些地方强大的过头了，反倒让人觉得很难理解。

另一方面，JsRender的官方文档比较详细，但其他资料出奇的少，遇到点什么问题，基本搜不到，不仅仅是相关问题搜不到，几乎就是没有结果。

再加上JsRender有些地方确实是不好理解，所以急需小菜分享一些“最佳实践”。

基于最近一段时间的使用，小菜总结了一些实用经验，当然，这些经验在官方文档上是找不到的。

注意：本文不是基础入门教程，以下例子中自带注释，不做过多说明，读者自行体会，不懂的地方可以留言。

嵌套循环使用#parent访问父级数据(不推荐)

嵌套循环使用#parent访问父级数据 --- by 杨元

序号姓名家庭成员

{{:#index + 1}}{{:name}}

{{for family}}

{{!-- 利用#parent访问父级index --}}

{{:#parent.parent.index + 1}}.{{:#index + 1}}

{{!-- 利用#parent访问父级数据，父级数据保存在data属性中 --}}

{{!-- #data相当于this --}}

{{:#parent.parent.data.name}}的{{:#data}}

{{/for}}

//数据源

var dataSrouce = [{

name: "张三",

family: [

"爸爸",

"妈妈",

"哥哥"

]

},{

name: "李四",

family: [

"爷爷",

"奶奶",

"叔叔"

]

}];

//渲染数据

var html = $("#testTmpl").render(dataSrouce);

$("#list").append(html);

嵌套循环使用参数访问父级数据(推荐)

嵌套循环使用参数访问父级数据 --- by 杨元

序号姓名家庭成员

{{:#index + 1}}{{:name}}

{{!-- 使用for循环时，可以在后边添加参数，参数必须以~开头，多个参数用空格分隔 --}}

{{!-- 通过参数，我们缓存了父级的数据，在子循环中通过访问参数，就可以间接访问父级数据 --}}

{{for family ~parentIndex=#index ~parentName=name}}

{{:~parentIndex + 1}}.{{:#index + 1}}

{{!-- #data相当于this --}}

{{:~parentName}}的{{:#data}}

{{/for}}

//数据源

var dataSrouce = [{

name: "张三",

family: [

"爸爸",

"妈妈",

"哥哥"

]

},{

name: "李四",

family: [

"爷爷",

"奶奶",

"叔叔"

]

}];

//渲染数据

var html = $("#testTmpl").render(dataSrouce);

$("#list").append(html);

自定义标签(custom tag)中使用else(强烈不推荐)

自定义标签中使用else --- by 杨元

名称单价

{{:name}}

{{!-- isShow为自定义标签，price是传入的参数，status是附加属性 --}}

{{isShow price status=0}}

{{:price}}

{{else price status=1}}

--

{{/isShow}}

//数据源

var dataSrouce = [{

name: "苹果",

price: 108

},{

name: "鸭梨",

price: 370

},{

name: "桃子",

price: 99

},{

name: "菠萝",

price: 371

},{

name: "橘子",

price: 153

}];

//自定义标签

$.views.tags({

"isShow": function(price){

var temp=price+''.split('');

if(this.tagCtx.props.status === 0){

//判断价格是否为水仙花数，如果是，则显示，否则不显示

if(price==(Math.pow(parseInt(temp[0],10),3)+Math.pow(parseInt(temp[1],10),3)+Math.pow(parseInt(temp[2],10),3))){

return this.tagCtxs[0].render();

}else{

return this.tagCtxs[1].render();

}

}else{

return "";

}

}

});

//渲染数据

var html = $("#testTmpl").render(dataSrouce);

$("#list").append(html);

用helper代替自定义标签(推荐)

用helper代替自定义标签 --- by 杨元

名称单价

{{:name}}

{{!-- 利用原生的if做分支跳转，利用helper做逻辑处理 --}}

{{if ~isShow(price)}}

{{:price}}

{{else}}

--

{{/if}}

//数据源

var dataSrouce = [{

name: "苹果",

price: 108

},{

name: "鸭梨",

price: 370

},{

name: "桃子",

price: 99

},{

name: "菠萝",

price: 371

},{

name: "橘子",

price: 153

}];

//Helper

$.views.helpers({

"isShow": function(price){

var temp=price+''.split('');

if(price==(Math.pow(parseInt(temp[0],10),3)+Math.pow(parseInt(temp[1],10),3)+Math.pow(parseInt(temp[2],10),3))){

return true;

}else{

return false;

}

}

});

//渲染数据

var html = $("#testTmpl").render(dataSrouce);

$("#list").append(html);