js模版引擎handlebars.js實用教程——另外一種Helper用法

時間 2019-11-08

標籤模版引擎 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>另外一種Helper用法 - by 楊元</title>
  6   </head>
  7   <body>
  8     <h1>另外一種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>{{transformat 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                             "name": "李四",
 63                             "sex": "0",
 64                             "age": 18
 65                         },
 66                         {
 67                             "name": "妞妞",
 68                             "sex": "1",
 69                             "age": 21
 70                         }
 71                     ]
 72                 };
 73         
 74         //註冊一個Handlebars模版，經過id找到某一個模版，獲取模版的html框架
 75         //$("#table-template").html()是jquery的語法，不懂的童鞋請惡補。。。
 76         var myTemplate = Handlebars.compile($("#table-template").html());
 77         
 78         //註冊一個比較大小的Helper,判斷v1是否大於v2
 79         Handlebars.registerHelper("compare",function(v1,v2,options){
 80           if(v1>v2){
 81             //知足添加繼續執行
 82             return options.fn(this);
 83           }else{
 84             //不知足條件執行{{else}}部分
 85             return options.inverse(this);
 86           }
 87         });
 88         
 89         //註冊一個翻譯用的Helper，0翻譯成男，1翻譯成女
 90         Handlebars.registerHelper("transformat",function(value){
 91           if(value==0){
 92             return "男";
 93           }else if(value==1){
 94             return "女";
 95           }
 96         });
 97         
 98         //將json對象用剛剛註冊的Handlebars模版封裝，獲得最終的html，插入到基礎table中。
 99         $('#tableList').html(myTemplate(data));
100       });
101     </script>
102   </body>
103 </html>