Posted in Javascript onDecember 29, 2014
前言
JsRender是一款基于jQuery的JavaScript模版引擎,它具有如下特点:
· 简单直观
· 功能强大
· 可扩展的
· 快如闪电
这些特性看起来很厉害,但几乎每个模版引擎,都会这么宣传。。。
由于工作需要,小菜才接触到此款模版引擎。使用了一段时间,发现它确实比较强大,但小菜觉得有些地方强大的过头了,反倒让人觉得很难理解。
另一方面,JsRender的官方文档比较详细,但其他资料出奇的少,遇到点什么问题,基本搜不到,不仅仅是相关问题搜不到,几乎就是没有结果。
再加上JsRender有些地方确实是不好理解,所以急需小菜分享一些“最佳实践”。
基于最近一段时间的使用,小菜总结了一些实用经验,当然,这些经验在官方文档上是找不到的。
注意:本文不是基础入门教程,以下例子中自带注释,不做过多说明,读者自行体会,不懂的地方可以留言。
嵌套循环使用#parent访问父级数据(不推荐)
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>嵌套循环使用#parent访问父级数据 --- by 杨元</title> <style> </style> </head> <body> <div> <table> <thead> <tr> <th width="10%">序号</th> <th width="10%">姓名</th> <th width="80%">家庭成员</th> </tr> </thead> <tbody id="list"> </tbody> </table> </div> <script src="jquery.min.js"></script> <script src="jsviews.js"></script> <!-- 定义JsRender模版 --> <script id="testTmpl" type="text/x-jsrender"> <tr> <td>{{:#index + 1}}</td> <td>{{:name}}</td> <td> {{for family}} {{!-- 利用#parent访问父级index --}} <b>{{:#parent.parent.index + 1}}.{{:#index + 1}}</b> {{!-- 利用#parent访问父级数据,父级数据保存在data属性中 --}} {{!-- #data相当于this --}} {{:#parent.parent.data.name}}的{{:#data}} {{/for}} </td> </tr> </script> <script> //数据源 var dataSrouce = [{ name: "张三", family: [ "爸爸", "妈妈", "哥哥" ] },{ name: "李四", family: [ "爷爷", "奶奶", "叔叔" ] }]; //渲染数据 var html = $("#testTmpl").render(dataSrouce); $("#list").append(html); </script> </body> </html>
嵌套循环使用参数访问父级数据(推荐)
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>嵌套循环使用参数访问父级数据 --- by 杨元</title> <style> </style> </head> <body> <div> <table> <thead> <tr> <th width="10%">序号</th> <th width="10%">姓名</th> <th width="80%">家庭成员</th> </tr> </thead> <tbody id="list"> </tbody> </table> </div> <script src="jquery.min.js"></script> <script src="jsviews.js"></script> <!-- 定义JsRender模版 --> <script id="testTmpl" type="text/x-jsrender"> <tr> <td>{{:#index + 1}}</td> <td>{{:name}}</td> <td> {{!-- 使用for循环时,可以在后边添加参数,参数必须以~开头,多个参数用空格分隔 --}} {{!-- 通过参数,我们缓存了父级的数据,在子循环中通过访问参数,就可以间接访问父级数据 --}} {{for family ~parentIndex=#index ~parentName=name}} <b>{{:~parentIndex + 1}}.{{:#index + 1}}</b> {{!-- #data相当于this --}} {{:~parentName}}的{{:#data}} {{/for}} </td> </tr> </script> <script> //数据源 var dataSrouce = [{ name: "张三", family: [ "爸爸", "妈妈", "哥哥" ] },{ name: "李四", family: [ "爷爷", "奶奶", "叔叔" ] }]; //渲染数据 var html = $("#testTmpl").render(dataSrouce); $("#list").append(html); </script> </body> </html>
自定义标签(custom tag)中使用else(强烈不推荐)
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>自定义标签中使用else --- by 杨元</title> <style> </style> </head> <body> <div> <table> <thead> <tr> <th width="50%">名称</th> <th width="50%">单价</th> </tr> </thead> <tbody id="list"> </tbody> </table> </div> <script src="jquery.min.js"></script> <script src="jsviews.js"></script> <!-- 定义JsRender模版 --> <script id="testTmpl" type="text/x-jsrender"> <tr> <td>{{:name}}</td> <td> {{!-- isShow为自定义标签,price是传入的参数,status是附加属性 --}} {{isShow price status=0}} {{:price}} {{else price status=1}} -- {{/isShow}} </td> </tr> </script> <script> //数据源 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); </script> </body> </html>
用helper代替自定义标签(推荐)
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>用helper代替自定义标签 --- by 杨元</title> <style> </style> </head> <body> <div> <table> <thead> <tr> <th width="50%">名称</th> <th width="50%">单价</th> </tr> </thead> <tbody id="list"> </tbody> </table> </div> <script src="jquery.min.js"></script> <script src="jsviews.js"></script> <!-- 定义JsRender模版 --> <script id="testTmpl" type="text/x-jsrender"> <tr> <td>{{:name}}</td> <td> {{!-- 利用原生的if做分支跳转,利用helper做逻辑处理 --}} {{if ~isShow(price)}} {{:price}} {{else}} -- {{/if}} </td> </tr> </script> <script> //数据源 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); </script> </body> </html>
演示代码打包下载:http://xiazai.3water.com/201412/yuanma/JsRender_Demo(3water.com).rar
基于jQuery的JavaScript模版引擎JsRender使用指南
- Author -
hebedich声明:登载此文出于传递更多信息之目的,并不意味着赞同其观点或证实其描述。
Reply on: @reply_date@
@reply_contents@