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。
从例子一开始，性别就是用0、1代码表示的，但实际情况下我们需要转换成汉字，transformat这个Helper需要一个参数，根据不同的代码，返回男女，这样调用{{transformat sex}}，其中sex是从当前上下文中读取的性别代码。
作者：杨元 欢迎任何形式的转载，但请务必注明出处。
转载请注明原文地址: https://ju.6miu.com/read-664062.html
