基于jQuery的JavaScript模版引擎JsRender使用指南
前言
JsRender是一款基于jQuery的JavaScript模版引擎,它具有如下特点:
· 简单直观
· 功能强大
· 可扩展的
· 快如闪电
这些特性看起来很厉害,但几乎每个模版引擎,都会这么宣传。。。
由于工作需要,小菜才接触到此款模版引擎。使用了一段时间,发现它确实比较强大,但小菜觉得有些地方强大的过头了,反倒让人觉得很难理解。
另一方面,JsRender的官方文档比较详细,但其他资料出奇的少,遇到点什么问题,基本搜不到,不仅仅是相关问题搜不到,几乎就是没有结果。
再加上JsRender有些地方确实是不好理解,所以急需小菜分享一些“最佳实践”。
基于最近一段时间的使用,小菜总结了一些实用经验,当然,这些经验在官方文档上是找不到的。
注意:本文不是基础入门教程,以下例子中自带注释,不做过多说明,读者自行体会,不懂的地方可以留言。
嵌套循环使用#parent访问父级数据(不推荐)
<!DOCTYPEhtml>
<html>
<head>
<metacharset="utf-8">
<title>嵌套循环使用#parent访问父级数据---by杨元</title>
<style>
</style>
</head>
<body>
<div>
<table>
<thead>
<tr>
<thwidth="10%">序号</th>
<thwidth="10%">姓名</th>
<thwidth="80%">家庭成员</th>
</tr>
</thead>
<tbodyid="list">
</tbody>
</table>
</div>
<scriptsrc="jquery.min.js"></script>
<scriptsrc="jsviews.js"></script>
<!--定义JsRender模版-->
<scriptid="testTmpl"type="text/x-jsrender">
<tr>
<td>{{:#index+1}}</td>
<td>{{:name}}</td>
<td>
{{forfamily}}
{{!--利用#parent访问父级index--}}
<b>{{:#parent.parent.index+1}}.{{:#index+1}}</b>
{{!--利用#parent访问父级数据,父级数据保存在data属性中--}}
{{!--#data相当于this--}}
{{:#parent.parent.data.name}}的{{:#data}}
{{/for}}
</td>
</tr>
</script>
<script>
//数据源
vardataSrouce=[{
name:"张三",
family:[
"爸爸",
"妈妈",
"哥哥"
]
},{
name:"李四",
family:[
"爷爷",
"奶奶",
"叔叔"
]
}];
//渲染数据
varhtml=$("#testTmpl").render(dataSrouce);
$("#list").append(html);
</script>
</body>
</html>
嵌套循环使用参数访问父级数据(推荐)
<!DOCTYPEhtml>
<html>
<head>
<metacharset="utf-8">
<title>嵌套循环使用参数访问父级数据---by杨元</title>
<style>
</style>
</head>
<body>
<div>
<table>
<thead>
<tr>
<thwidth="10%">序号</th>
<thwidth="10%">姓名</th>
<thwidth="80%">家庭成员</th>
</tr>
</thead>
<tbodyid="list">
</tbody>
</table>
</div>
<scriptsrc="jquery.min.js"></script>
<scriptsrc="jsviews.js"></script>
<!--定义JsRender模版-->
<scriptid="testTmpl"type="text/x-jsrender">
<tr>
<td>{{:#index+1}}</td>
<td>{{:name}}</td>
<td>
{{!--使用for循环时,可以在后边添加参数,参数必须以~开头,多个参数用空格分隔--}}
{{!--通过参数,我们缓存了父级的数据,在子循环中通过访问参数,就可以间接访问父级数据--}}
{{forfamily~parentIndex=#index~parentName=name}}
<b>{{:~parentIndex+1}}.{{:#index+1}}</b>
{{!--#data相当于this--}}
{{:~parentName}}的{{:#data}}
{{/for}}
</td>
</tr>
</script>
<script>
//数据源
vardataSrouce=[{
name:"张三",
family:[
"爸爸",
"妈妈",
"哥哥"
]
},{
name:"李四",
family:[
"爷爷",
"奶奶",
"叔叔"
]
}];
//渲染数据
varhtml=$("#testTmpl").render(dataSrouce);
$("#list").append(html);
</script>
</body>
</html>
自定义标签(customtag)中使用else(强烈不推荐)
用helper代替自定义标签(推荐)
<!DOCTYPEhtml>
<html>
<head>
<metacharset="utf-8">
<title>自定义标签中使用else---by杨元</title>
<style>
</style>
</head>
<body>
<div>
<table>
<thead>
<tr>
<thwidth="50%">名称</th>
<thwidth="50%">单价</th>
</tr>
</thead>
<tbodyid="list">
</tbody>
</table>
</div>
<scriptsrc="jquery.min.js"></script>
<scriptsrc="jsviews.js"></script>
<!--定义JsRender模版-->
<scriptid="testTmpl"type="text/x-jsrender">
<tr>
<td>{{:name}}</td>
<td>
{{!--isShow为自定义标签,price是传入的参数,status是附加属性--}}
{{isShowpricestatus=0}}
{{:price}}
{{elsepricestatus=1}}
--
{{/isShow}}
</td>
</tr>
</script>
<script>
//数据源
vardataSrouce=[{
name:"苹果",
price:108
},{
name:"鸭梨",
price:370
},{
name:"桃子",
price:99
},{
name:"菠萝",
price:371
},{
name:"橘子",
price:153
}];
//自定义标签
$.views.tags({
"isShow":function(price){
vartemp=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))){
returnthis.tagCtxs[0].render();
}else{
returnthis.tagCtxs[1].render();
}
}else{
return"";
}
}
});
//渲染数据
varhtml=$("#testTmpl").render(dataSrouce);
$("#list").append(html);
</script>
</body>
</html>
<!DOCTYPEhtml>
<html>
<head>
<metacharset="utf-8">
<title>用helper代替自定义标签---by杨元</title>
<style>
</style>
</head>
<body>
<div>
<table>
<thead>
<tr>
<thwidth="50%">名称</th>
<thwidth="50%">单价</th>
</tr>
</thead>
<tbodyid="list">
</tbody>
</table>
</div>
<scriptsrc="jquery.min.js"></script>
<scriptsrc="jsviews.js"></script>
<!--定义JsRender模版-->
<scriptid="testTmpl"type="text/x-jsrender">
<tr>
<td>{{:name}}</td>
<td>
{{!--利用原生的if做分支跳转,利用helper做逻辑处理--}}
{{if~isShow(price)}}
{{:price}}
{{else}}
--
{{/if}}
</td>
</tr>
</script>
<script>
//数据源
vardataSrouce=[{
name:"苹果",
price:108
},{
name:"鸭梨",
price:370
},{
name:"桃子",
price:99
},{
name:"菠萝",
price:371
},{
name:"橘子",
price:153
}];
//Helper
$.views.helpers({
"isShow":function(price){
vartemp=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))){
returntrue;
}else{
returnfalse;
}
}
});
//渲染数据
varhtml=$("#testTmpl").render(dataSrouce);
$("#list").append(html);
</script>
</body>
</html>
相关文章