js模版引擎handlebars.js實用教程——with-終極this應用

時間 2019-11-18

標籤模版引擎 handlebars.js handlebars 實用教程終極應用欄目 JavaScript 简体版

原文原文鏈接

 1 <!DOCTYPE html>
 2 <html>
 3   <head>
 4     <META http-equiv=Content-Type content="text/html; charset=utf-8">
 5     <title>with-終極this應用 - by 楊元</title>
 6   </head>
 7   <body>
 8     <h1>with-終極this應用</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 this}}
33         <tr>
34           <td>{{name}}</td>
35           <td>{{sex}}</td>
36           <td>{{age}}</td>
37           <td>
38             {{#with favorite}}
39               {{#each this}}
40                 <p>{{this}}</p>
41               {{/each}}
42             {{/with}}
43           </td>
44         </tr> 
45       {{/each}}
46     </script>
47     
48     <!--進行數據處理、html構造-->
49     <script type="text/javascript">
50       $(document).ready(function() {
51         //模擬的json對象
52         var data = [
53                         {
54                             "name": "張三",
55                             "sex": "0",
56                             "age": 18,
57                             "favorite":
58                             [
59                               "唱歌",
60                               "籃球"
61                             ]
62                         },
63                         {
64                             "name": "李四",
65                             "sex": "0",
66                             "age": 22,
67                             "favorite":
68                             [
69                               "上網",
70                               "足球"
71                             ]
72                         },
73                         {
74                             "name": "妞妞",
75                             "sex": "1",
76                             "age": 18,
77                             "favorite":
78                             [
79                               "電影",
80                               "旅遊"
81                             ]
82                         }
83                     ];
84         
85         //註冊一個Handlebars模版，經過id找到某一個模版，獲取模版的html框架
86         //$("#table-template").html()是jquery的語法，不懂的童鞋請惡補。。。
87         var myTemplate = Handlebars.compile($("#table-template").html());
88         
89         //將json對象用剛剛註冊的Handlebars模版封裝，獲得最終的html，插入到基礎table中。
90         $('#tableList').html(myTemplate(data));
91       });
92     </script>
93   </body>
94 </html>