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

2024-04-27 15:07:35

字體：大中小

供稿：網(wǎng)友

 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     <!--基礎(chǔ)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標(biāo)簽中，保留了html原有層次結(jié)構(gòu),模版中要寫一些操作語句-->29     <!--id可以用來唯一確定一個(gè)模版,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     <!--進(jìn)行數(shù)據(jù)處理、html構(gòu)造-->51     <script type="text/javascript">52       $(document).ready(function() {53         //模擬的json對(duì)象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         //注冊(cè)一個(gè)Handlebars模版，通過id找到某一個(gè)模版，獲取模版的html框架74         //$("#table-template").html()是jquery的語法，不懂的童鞋請(qǐng)惡補(bǔ)。。。75         var myTemplate = Handlebars.compile($("#table-template").html());76         77         //注冊(cè)一個(gè)比較大小的Helper,判斷v1是否大于v278         Handlebars.registerHelper("compare",function(v1,v2,options){79           if(v1>v2){80             //滿足添加繼續(xù)執(zhí)行81             return options.fn(this);82           }else{83             //不滿足條件執(zhí)行{{else}}部分84             return options.inverse(this);85           }86         });87         88         //將json對(duì)象用剛剛注冊(cè)的Handlebars模版封裝，得到最終的html，插入到基礎(chǔ)table中。89         $('#tableList').html(myTemplate(data));90       });91     </script>92   </body>93 </html> 
 
         很多時(shí)候，我們需要更加復(fù)雜的if判斷邏輯，顯然默認(rèn)的if不能滿足我們的需求。
         本例中，利用Handlebars.js中Helper強(qiáng)大的擴(kuò)展性，定義了一個(gè)compare，它用來比較兩個(gè)數(shù)的大小，如果第一個(gè)數(shù)大于第二個(gè)數(shù)，滿足條件繼續(xù)執(zhí)行，否則執(zhí)行{{else}}部分。
         Handlebars.registerHelper用來定義Helper，它有兩個(gè)參數(shù)，第一個(gè)參數(shù)是Helper名稱，第二個(gè)參數(shù)是一個(gè)回調(diào)函數(shù)，用來執(zhí)行核心業(yè)務(wù)邏輯。本例中的函數(shù)，有三個(gè)參數(shù)，其中前兩個(gè)參數(shù)是需要比較的兩個(gè)數(shù)，第三個(gè)參數(shù)是固定的，就叫options，如果加了該參數(shù)，就說明這個(gè)Helper是一個(gè)Block，塊級(jí)別的Helper，有一定的語法結(jié)構(gòu)，調(diào)用的時(shí)候加#號(hào)，就像if那樣。
         關(guān)于options的使用，小菜所了解的就是這種用法，return options.fn(this);表示滿足條件繼續(xù)執(zhí)行，也就是執(zhí)行{{#compare }}和{{else}}之間的代碼；return options.inverse(this);表示不滿足條件，也就是執(zhí)行{{else}}和{{/compare}}之間的代碼。
         由于這是一個(gè)塊級(jí)別的Helper，所以調(diào)用要加#，例如：{{#compare age 20}}，其中的age就是當(dāng)前上下文中讀取到的年齡，20是小菜隨便寫的值，意思是只要age比20大，就顯示，否則全顯示?。
         讀者可以看出，Helper中寫的可以是任何js代碼，現(xiàn)在想想，就知道Handlebars有多靈活了吧??！
 
 
 
作者：楊元?dú)g迎任何形式的轉(zhuǎn)載，但請(qǐng)務(wù)必注明出處。