標籤：用法 預設 使用 層級 handle blog beta jquer code
相容ie8（很實用，複製過來，僅供技術參考，更詳細內容請看源地址：http://www.cnblogs.com/iyangyuan/archive/2013/12/12/3471227.html）
<!DOCTYPE html><html> <head> <META http-equiv=Content-Type content="text/html; charset=utf-8"> <title>由於if功力不足引出的Helper - by 楊元</title> </head> <body> <h1>由於if功力不足引出的Helper</h1> <!--基礎html架構--> <table> <thead> <tr> <th>姓名</th> <th>性別</th> <th>年齡</th> </tr> </thead> <tbody id="tableList"> </tbody> </table> <!--外掛程式引用--> <script type="text/javascript" src="script/jquery.js"></script> <script type="text/javascript" src="script/handlebars-1.0.0.beta.6.js"></script> <!--Handlebars.js模版--> <!--Handlebars.js模版放在script標籤中，保留了html原有階層,模版中要寫一些動作陳述式--> <!--id可以用來唯一確定一個模版,type是模版固定的寫法--> <script id="table-template" type="text/x-handlebars-template"> {{#each student}} {{#if name}} {{#compare age 20}} <tr> <td>{{name}}</td> <td>{{sex}}</td> <td>{{age}}</td> </tr> {{else}} <tr> <td>?</td> <td>?</td> <td>?</td> </tr> {{/compare}} {{/if}} {{/each}} </script> <!--進行資料處理、html構造--> <script type="text/javascript"> $(document).ready(function() { //類比的json對象 var data = { "student": [ { "name": "張三", "sex": "0", "age": 23 }, { "sex": "0", "age": 22 }, { "name": "妞妞", "sex": "1", "age": 18 } ] }; //註冊一個Handlebars模版，通過id找到某一個模版，擷取模版的html架構 //$("#table-template").html()是jquery的文法，不懂的童鞋請惡補。。。 var myTemplate = Handlebars.compile($("#table-template").html()); //註冊一個比較大小的Helper,判斷v1是否大於v2 Handlebars.registerHelper("compare",function(v1,v2,options){ if(v1>v2){ //滿足添加繼續執行 return options.fn(this); }else{ //不滿足條件執行{{else}}部分 return options.inverse(this); } }); //將json對象用剛剛註冊的Handlebars模版封裝，得到最終的html，插入到基礎table中。 $(‘#tableList‘).html(myTemplate(data)); }); </script> </body></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有多靈活了吧！！
使用jQuery+huandlebars遍曆if判斷不足引用helper
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
