您的位置：首页 > 其它

handlebars-----另一种help的写法

2015-09-01 16:45 218 查看 
1 <!DOCTYPE html>
2 <html>
3   <head>
4     <META http-equiv=Content-Type content="text/html; charset=utf-8">
5     <title>另一种Helper用法 - by 杨元</title>
6   </head>
7   <body>
8     <h1>另一种Helper用法</h1>
9     <!--基础html框架-->
10     <table>
11       <thead>
12         <tr>
13           <th>姓名</th>
14           <th>性别</th>
15           <th>年龄</th>
16         </tr>
17       </thead>
18       <tbody id="tableList">
19
20       </tbody>
21     </table>
22
23     <!--插件引用-->
24     <script type="text/javascript" src="script/jquery.js"></script>
25     <script type="text/javascript" src="script/handlebars-1.0.0.beta.6.js"></script>
26
27     <!--Handlebars.js模版-->
28     <!--Handlebars.js模版放在script标签中，保留了html原有层次结构,模版中要写一些操作语句-->
29     <!--id可以用来唯一确定一个模版,type是模版固定的写法-->
30     <script id="table-template" type="text/x-handlebars-template">
31       {{#each student}}
32         {{#if name}}
33           {{#compare age 20}}
34             <tr>
35               <td>{{name}}</td>
36               <td>{{transformat sex}}</td>
37               <td>{{age}}</td>
38             </tr>
39           {{else}}
40             <tr>
41               <td>?</td>
42               <td>?</td>
43               <td>?</td>
44             </tr>
45           {{/compare}}
46         {{/if}}
47       {{/each}}
48     </script>
49
50     <!--进行数据处理、html构造-->
51     <script type="text/javascript">
52       $(document).ready(function() {
53         //模拟的json对象
54         var data = {
55                     "student": [
56                         {
57                             "name": "张三",
58                             "sex": "0",
59                             "age": 23
60                         },
61                         {
62                             "name": "李四",
63                             "sex": "0",
64                             "age": 18
65                         },
66                         {
67                             "name": "妞妞",
68                             "sex": "1",
69                             "age": 21
70                         }
71                     ]
72                 };
73
74         //注册一个Handlebars模版，通过id找到某一个模版，获取模版的html框架
75         //$("#table-template").html()是jquery的语法，不懂的童鞋请恶补。。。
76         var myTemplate = Handlebars.compile($("#table-template").html());
77
78         //注册一个比较大小的Helper,判断v1是否大于v2
79         Handlebars.registerHelper("compare",function(v1,v2,options){
80           if(v1>v2){
81             //满足添加继续执行
82             return options.fn(this);
83           }else{
84             //不满足条件执行{{else}}部分
85             return options.inverse(this);
86           }
87         });
88
89         //注册一个翻译用的Helper，0翻译成男，1翻译成女
90         Handlebars.registerHelper("transformat",function(value){
91           if(value==0){
92             return "男";
93           }else if(value==1){
94             return "女";
95           }
96         });
97
98         //将json对象用刚刚注册的Handlebars模版封装，得到最终的html，插入到基础table中。
99         $('#tableList').html(myTemplate(data));
100       });
101     </script>
102   </body>
103 </html>
注：带options参数的Helper是块级别的，而不带的，相当于行内级别的Helper。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航