js模版引擎handlebars.js實用教程——因爲if功力不足引出的Helper

時間 2019-11-26

標籤模版引擎 handlebars.js handlebars 實用教程因爲功力不足引出 helper 欄目 JavaScript 简体版

原文原文鏈接

 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不能知足咱們的需求。html

本例中，利用Handlebars.js中Helper強大的擴展性，定義了一個compare，它用來比較兩個數的大小，若是第一個數大於第二個數，知足條件繼續執行，不然執行{{else}}部分。java

Handlebars.registerHelper用來定義Helper，它有兩個參數，第一個參數是Helper名稱，第二個參數是一個回調函數，用來執行核心業務邏輯。本例中的函數，有三個參數，其中前兩個參數是須要比較的兩個數，第三個參數是固定的，就叫options，若是加了該參數，就說明這個Helper是一個Block，塊級別的Helper，有必定的語法結構，調用的時候加#號，就像if那樣。jquery

關於options的使用，小菜所瞭解的就是這種用法，return options.fn(this);表示知足條件繼續執行，也就是執行{{#compare }}和{{else}}之間的代碼；return options.inverse(this);表示不知足條件，也就是執行{{else}}和{{/compare}}之間的代碼。json

因爲這是一個塊級別的Helper，因此調用要加#，例如：{{#compare age 20}}，其中的age就是當前上下文中讀取到的年齡，20是小菜隨便寫的值，意思是隻要age比20大，就顯示，不然全顯示?。框架

讀者能夠看出，Helper中寫的能夠是任何js代碼，如今想一想，就知道Handlebars有多靈活了吧！！函數