返回目录原文链接
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <META http-equiv=Content-Type content="text/html; charset=utf-8">
5 <title>由于if功力不足引出的Helper - by 杨元</title>
6 </head>
7 <body>
8 <h1>由于if功力不足引出的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>{{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 "sex": "0",
63 "age": 22
64 },
65 {
66 "name": "妞妞",
67 "sex": "1",
68 "age": 18
69 }
70 ]
71 };
72
73 //注册一个Handlebars模版，通过id找到某一个模版，获取模版的html框架
74 //$("#table-template").html()是jquery的语法，不懂的童鞋请恶补。。。
75 var myTemplate = Handlebars.compile($("#table-template").html());
76
77 //注册一个比较大小的Helper,判断v1是否大于v2
78 Handlebars.registerHelper("compare",function(v1,v2,options){
79 if(v1>v2){
80 //满足添加继续执行
81 return options.fn(this);
82 }else{
83 //不满足条件执行{{else}}部分
84 return options.inverse(this);
85 }
86 });
87
88 //将json对象用刚刚注册的Handlebars模版封装，得到最终的html，插入到基础table中。
89 $('#tableList').html(myTemplate(data));
90 });
91 </script>
92 </body>
93 </html>
很多时候，我们需要更加复杂的if判断逻辑，显然默认的if不能满足我们的需求。
本例中，利用Handlebars.js中Helper强大的扩展性，定义了一个compare，它用来比较两个数的大小，如果第一个数大于第二个数，满足条件继续执行，否则执行{{else}}部分。
Handlebars.registerHelper用来定义Helper，它有两个参数，第一个参数是Helper名称，第二个参数是一个回调函数，用来执行核心业务逻辑。本例中的函数，有三个参数，其中前两个参数是需要比较的两个数，第三个参数是固定的，就叫options，如果加了该参数，就说明这个Helper是一个Block，块级别的Helper，有一定的语法结构，调用的时候加#号，就像if那样。
关于options的使用，小菜所了解的就是这种用法，return options.fn(this);表示满足条件继续执行，也就是执行{{#compare }}和{{else}}之间的代码；return options.inverse(this);表示不满足条件，也就是执行{{else}}和{{/compare}}之间的代码。
由于这是一个块级别的Helper，所以调用要加#，例如：{{#compare age 20}}，其中的age就是当前上下文中读取到的年龄，20是小菜随便写的值，意思是只要age比20大，就显示，否则全显示?。
读者可以看出，Helper中写的可以是任何js代码，现在想想，就知道Handlebars有多灵活了吧！！
注:参数可以传递多个，如
Handlebars.registerHelper("doexpression3",function(x1,x2,x3){ }）
{{#if (doexpression3 bean.weichatid bean.weichatname bean.weichatcode)}}