前言：
正在做angularJs的分页功能时，发现了JsRender这个插件，园子里的大神多，查到一个用JsRender实现的分页demo，地址是这个 http://www.cnblogs.com/sword-successful/p/4759027.html#3379766
查了一下相关的基本资料
下面是引自http://www.ziliao1.com/article/show/0c5ac83aeac0a1fc6af388817c52b6c0.html
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>
时间： 2024-11-08 14:51:55