js模版引擎handlebars.js實用教程——關於HTML編碼

時間 2019-11-08

標籤模版引擎 handlebars.js handlebars 實用教程關於 html 編碼欄目 JavaScript 简体版

原文原文鏈接

 1 <!DOCTYPE html>
 2 <html>
 3   <head>
 4     <META http-equiv=Content-Type content="text/html; charset=utf-8">
 5     <title>關於HTML編碼 - by 楊元</title>
 6   </head>
 7   <body>
 8     <h1>關於HTML編碼</h1>
 9     <!--基礎html框架-->
10     <table>
11       <thead>
12         <tr>
13           <th>姓名</th>
14           <th>性別</th>
15           <th>年齡</th>
16           <th>我的主頁</th>
17         </tr>
18       </thead>
19       <tbody id="tableList">
20         
21       </tbody>
22     </table>
23     
24     <!--插件引用-->
25     <script type="text/javascript" src="script/jquery.js"></script>
26     <script type="text/javascript" src="script/handlebars-1.0.0.beta.6.js"></script>
27     
28     <!--Handlebars.js模版-->
29     <!--Handlebars.js模版放在script標籤中，保留了html原有層次結構,模版中要寫一些操做語句-->
30     <!--id能夠用來惟一肯定一個模版,type是模版固定的寫法-->
31     <script id="table-template" type="text/x-handlebars-template">
32       {{#each student}}
33         <tr>
34           <td>{{name}}</td>
35           <td>{{sex}}</td>
36           <td>{{age}}</td>
37           {{#compare age 20}}
38             <td>{{homePage}}</td>
39           {{else}}
40             <td>{{{homePage}}}</td>
41           {{/compare}}
42         </tr> 
43       {{/each}}
44     </script>
45     
46     <!--進行數據處理、html構造-->
47     <script type="text/javascript">
48       $(document).ready(function() {
49         //模擬的json對象
50         var data = {
51                     "student": [
52                         {
53                             "name": "張三",
54                             "sex": "0",
55                             "age": 18,
56                             "homePage":"<a href='javascript:void(0);'>張三的我的主頁</a>"
57                         },
58                         {
59                             "name": "李四",
60                             "sex": "0",
61                             "age": 22,
62                             "homePage":"<a href='javascript:void(0);'>李四的我的主頁</a>"
63                         },
64                         {
65                             "name": "妞妞",
66                             "sex": "1",
67                             "age": 19,
68                             "homePage":"<a href='javascript:void(0);'>妞妞的我的主頁</a>"
69                         }
70                     ]
71                 };
72         
73         //註冊一個Handlebars模版，經過id找到某一個模版，獲取模版的html框架
74         //$("#table-template").html()是jquery的語法，不懂的童鞋請惡補。。。
75         var myTemplate = Handlebars.compile($("#table-template").html());
76         
77         //註冊一個比較數字大小的Helper,有options參數，塊級Helper
78         Handlebars.registerHelper("compare",function(v1,v2,options){
79           //判斷v1是否比v2大
80           if(v1>v2){
81             //繼續執行
82             return options.fn(this);
83           }else{
84             //執行else部分
85             return options.inverse(this);
86           }
87         });
88         
89         //將json對象用剛剛註冊的Handlebars模版封裝，獲得最終的html，插入到基礎table中。
90         $('#tableList').html(myTemplate(data));
91       });
92     </script>
93   </body>
94 </html>