前端录网站,记录前端点点滴滴,帮助程序猿快速成长!

js模版引擎handlebars.js实用教程——由于if功力不足引出的Helper

js
返回目录

 1 <!DOCTYPE html>
 2 <html>
 3   <head>
 4     <META http-equiv=Content-Type content="text/html; charset=utf-8">
 5     <title>由于if功力不足引出的Helper</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有多灵活了吧!!



转载请注明:前端录»js模版引擎handlebars.js实用教程——由于if功力不足引出的Helper