码迷,mamicode.com
首页 > Web开发 > 详细

JsRender实用教程(tag else使用、循环嵌套访问父级数据)

时间:2014-09-16 18:55:10      阅读:535      评论:0      收藏:0      [点我收藏+]

标签:style   blog   http   color   io   使用   java   ar   strong   

前言

     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>

 代码打包

 

Download

 

JsRender实用教程(tag else使用、循环嵌套访问父级数据)

标签:style   blog   http   color   io   使用   java   ar   strong   

原文地址:http://www.cnblogs.com/iyangyuan/p/3975591.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!