11-由于if功力不足引出的Helper

2024-04-27 15:07:35

字体：大中小

来源：转载

供稿：网友

 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": 2360                         },61                         {62                             "sex": "0",63                             "age": 2264                         },65                         {66                             "name": "妞妞",67                             "sex": "1",68                             "age": 1869                         }70                     ]71                 };72         73         //注册一个Handlebars模版，通过id找到某一个模版，获取模版的html框架74         //$("#table-template").html()是jquery的语法，不懂的童鞋请恶补。。。75         var myTemplate = Handlebars.compile($("#table-template").html());76         77         //注册一个比较大小的Helper,判断v1是否大于v278         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有多灵活了吧！！
 
 
 
作者：杨元欢迎任何形式的转载，但请务必注明出处。