首页 > 代码库 > JsRender实用教程(tag else使用、循环嵌套访问父级数据)
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: 10849 },{50 name: "鸭梨",51 price: 37052 },{53 name: "桃子",54 price: 9955 },{56 name: "菠萝",57 price: 37158 },{59 name: "橘子",60 price: 15361 }];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: 10849 },{50 name: "鸭梨",51 price: 37052 },{53 name: "桃子",54 price: 9955 },{56 name: "菠萝",57 price: 37158 },{59 name: "橘子",60 price: 15361 }];62 63 //Helper64 $.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>
代码打包
Download
JsRender实用教程(tag else使用、循环嵌套访问父级数据)
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。