JsRender实用教程(tag else使用、循环嵌套访问父级数据)
前言
JsRender是一款基于jQuery的JavaScript模版引擎，它具有如下特点：
· 简单直观
· 功能强大
· 可扩展的
· 快如闪电
这些特性看起来很厉害，但几乎每个模版引擎，都会这么宣传。。。
由于工作需要，小菜才接触到此款模版引擎。使用了一段时间，发现它确实比较强大，但小菜觉得有些地方强大的过头了，反倒让人觉得很难理解。
另一方面，JsRender的官方文档比较详细，但其他资料出奇的少，遇到点什么问题，基本搜不到，不仅仅是相关问题搜不到，几乎就是没有结果。
再加上JsRender有些地方确实是不好理解，所以急需小菜分享一些“最佳实践”。
基于最近一段时间的使用，小菜总结了一些实用经验，当然，这些经验在官方文档上是找不到的。
注意：本文不是基础入门教程，以下例子中自带注释，不做过多说明，读者自行体会，不懂的地方可以留言。
嵌套循环使用#parent访问父级数据（不推荐）
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>嵌套循环使用#parent访问父级数据 --- by 杨元</title> 6 <style> 7 </style> 8 9 </head> 10 <body> 11 12 <div> 13 <table> 14 <thead> 15 <tr> 16 <th width="10%">序号</th> 17 <th width="10%">姓名</th> 18 <th width="80%">家庭成员</th> 19 </tr> 20 </thead> 21 <tbody id="list"> 22 23 </tbody> 24 </table> 25 </div> 26 27 <script src="jquery.min.js"></script> 28 <script src="jsviews.js"></script> 29 30 <!-- 定义JsRender模版 --> 31 <script id="testTmpl" type="text/x-jsrender"> 32 <tr> 33 <td>{{:#index + 1}}</td> 34 <td>{{:name}}</td> 35 <td> 36 {{for family}} 37 {{!-- 利用#parent访问父级index --}} 38 <b>{{:#parent.parent.index + 1}}.{{:#index + 1}}</b> 39 {{!-- 利用#parent访问父级数据，父级数据保存在data属性中 --}} 40 {{!-- #data相当于this --}} 41 {{:#parent.parent.data.name}}的{{:#data}} 42 {{/for}} 43 </td> 44 </tr> 45 </script> 46 47 <script> 48 //数据源 49 var dataSrouce = [{ 50 name: "张三", 51 family: [ 52 "爸爸", 53 "妈妈", 54 "哥哥" 55 ] 56 },{ 57 name: "李四", 58 family: [ 59 "爷爷", 60 "奶奶", 61 "叔叔" 62 ] 63 }]; 64 65 //渲染数据 66 var html = $("#testTmpl").render(dataSrouce); 67 $("#list").append(html); 68 69 70 </script> 71 72 </body> 73 </html>
嵌套循环使用参数访问父级数据（推荐）
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>嵌套循环使用参数访问父级数据 --- by 杨元</title> 6 <style> 7 </style> 8 9 </head> 10 <body> 11 12 <div> 13 <table> 14 <thead> 15 <tr> 16 <th width="10%">序号</th> 17 <th width="10%">姓名</th> 18 <th width="80%">家庭成员</th> 19 </tr> 20 </thead> 21 <tbody id="list"> 22 23 </tbody> 24 </table> 25 </div> 26 27 <script src="jquery.min.js"></script> 28 <script src="jsviews.js"></script> 29 30 <!-- 定义JsRender模版 --> 31 <script id="testTmpl" type="text/x-jsrender"> 32 <tr> 33 <td>{{:#index + 1}}</td> 34 <td>{{:name}}</td> 35 <td> 36 {{!-- 使用for循环时，可以在后边添加参数，参数必须以~开头，多个参数用空格分隔 --}} 37 {{!-- 通过参数，我们缓存了父级的数据，在子循环中通过访问参数，就可以间接访问父级数据 --}} 38 {{for family ~parentIndex=#index ~parentName=name}} 39 <b>{{:~parentIndex + 1}}.{{:#index + 1}}</b> 40 {{!-- #data相当于this --}} 41 {{:~parentName}}的{{:#data}} 42 {{/for}} 43 </td> 44 </tr> 45 </script> 46 47 <script> 48 //数据源 49 var dataSrouce = [{ 50 name: "张三", 51 family: [ 52 "爸爸", 53 "妈妈", 54 "哥哥" 55 ] 56 },{ 57 name: "李四", 58 family: [ 59 "爷爷", 60 "奶奶", 61 "叔叔" 62 ] 63 }]; 64 65 //渲染数据 66 var html = $("#testTmpl").render(dataSrouce); 67 $("#list").append(html); 68 69 </script> 70 71 </body> 72 </html>
自定义标签(custom tag)中使用else（强烈不推荐）
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>自定义标签中使用else --- by 杨元</title> 6 <style> 7 </style> 8 9 </head> 10 <body> 11 12 <div> 13 <table> 14 <thead> 15 <tr> 16 <th width="50%">名称</th> 17 <th width="50%">单价</th> 18 </tr> 19 </thead> 20 <tbody id="list"> 21 22 </tbody> 23 </table> 24 </div> 25 26 <script src="jquery.min.js"></script> 27 <script src="jsviews.js"></script> 28 29 <!-- 定义JsRender模版 --> 30 <script id="testTmpl" type="text/x-jsrender"> 31 <tr> 32 <td>{{:name}}</td> 33 <td> 34 {{!-- isShow为自定义标签，price是传入的参数，status是附加属性 --}} 35 {{isShow price status=0}} 36 {{:price}} 37 {{else price status=1}} 38 -- 39 {{/isShow}} 40 </td> 41 </tr> 42 </script> 43 44 <script> 45 //数据源 46 var dataSrouce = [{ 47 name: "苹果", 48 price: 108 49 },{ 50 name: "鸭梨", 51 price: 370 52 },{ 53 name: "桃子", 54 price: 99 55 },{ 56 name: "菠萝", 57 price: 371 58 },{ 59 name: "橘子", 60 price: 153 61 }]; 62 63 //自定义标签 64 $.views.tags({ 65 "isShow": function(price){ 66 var temp=price+''.split(''); 67 68 if(this.tagCtx.props.status === 0){ 69 //判断价格是否为水仙花数，如果是，则显示，否则不显示 70 if(price==(Math.pow(parseInt(temp[0],10),3)+Math.pow(parseInt(temp[1],10),3)+Math.pow(parseInt(temp[2],10),3))){ 71 return this.tagCtxs[0].render(); 72 }else{ 73 return this.tagCtxs[1].render(); 74 } 75 }else{ 76 return ""; 77 } 78 79 } 80 }); 81 82 83 //渲染数据 84 var html = $("#testTmpl").render(dataSrouce); 85 $("#list").append(html); 86 87 </script> 88 89 </body> 90 </html>
用helper代替自定义标签（推荐）
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>用helper代替自定义标签 --- by 杨元</title> 6 <style> 7 </style> 8 9 </head> 10 <body> 11 12 <div> 13 <table> 14 <thead> 15 <tr> 16 <th width="50%">名称</th> 17 <th width="50%">单价</th> 18 </tr> 19 </thead> 20 <tbody id="list"> 21 22 </tbody> 23 </table> 24 </div> 25 26 <script src="jquery.min.js"></script> 27 <script src="jsviews.js"></script> 28 29 <!-- 定义JsRender模版 --> 30 <script id="testTmpl" type="text/x-jsrender"> 31 <tr> 32 <td>{{:name}}</td> 33 <td> 34 {{!-- 利用原生的if做分支跳转，利用helper做逻辑处理 --}} 35 {{if ~isShow(price)}} 36 {{:price}} 37 {{else}} 38 -- 39 {{/if}} 40 </td> 41 </tr> 42 </script> 43 44 <script> 45 //数据源 46 var dataSrouce = [{ 47 name: "苹果", 48 price: 108 49 },{ 50 name: "鸭梨", 51 price: 370 52 },{ 53 name: "桃子", 54 price: 99 55 },{ 56 name: "菠萝", 57 price: 371 58 },{ 59 name: "橘子", 60 price: 153 61 }]; 62 63 //Helper 64 $.views.helpers({ 65 "isShow": function(price){ 66 var temp=price+''.split(''); 67 if(price==(Math.pow(parseInt(temp[0],10),3)+Math.pow(parseInt(temp[1],10),3)+Math.pow(parseInt(temp[2],10),3))){ 68 return true; 69 }else{ 70 return false; 71 } 72 } 73 }); 74 75 //渲染数据 76 var html = $("#testTmpl").render(dataSrouce); 77 $("#list").append(html); 78 79 </script> 80 81 </body> 82 </html>
代码打包
