handlebars，each循環裏面套each循環

時間 2020-06-08

標籤 handlebars 循環裏面简体版

原文原文鏈接

handlebars能夠用each自動進行循環，下面介紹一下each循環裏面套循環來着。javascript

html代碼html

 1 !DOCTYPE html>
 2 <html>
 3   <head>
 4     <meta charset="utf-8">
 5     <title>handlebars循環套循環</title>
 6     <style media="screen">
 7       *{
 8         margin: 0;
 9         padding: 0;
10         list-style: none;
11       }
12       .time{
13         float:left;
14         width:100px;
15       }
16       .content{
17         float:left;
18         border-left:1px solid black;
19         width: 100px;
20         padding-left: 20px;
21         padding-bottom: 10px;
22       }
23       #dataList li{
24         clear: both;
25       }
26     </style>
27   </head>
28 
29   <body>
30     <div>
31       <ul id="dataList">
32 
33       </ul>
34     </div>
35     <!-- 引入jquery、handlebars的JS文件 -->
36     <script type="text/javascript" src="../js/jquery-1.8.3.min.js"></script>
37     <script type="text/javascript" src="../js/handlebars.min.js"></script>
38     <!-- 建立一個script標籤，把type屬性改成：text/x-handlebars-template -->
39     <script id="table-template" type="text/x-handlebars-template">
40       <!-- 把data的數據進行循環 -->
41       {{#each data}}
42         <li>
43           <div class="time">
44             <p>{{name}}</p>
45           </div>
46           <div class="content">
47             <!-- 把data:info裏面的數據再次進行循環 -->
48             {{#each info}}
49             <!-- info裏面多個數據，因此這裏能夠直接連續打印多個this -->
50             <p>{{this}}</p>
51             {{/each}}
52           </div>
53         </li>
54        {{/each}}
55   </script>
56 
57   <script type="text/javascript" src="./index.js"></script>
58 
59   </body>
60 </html>

index.js代碼：java

 1 // JSON數據
 2 var data = [
 3   {
 4      "name":"張三",
 5      "info":[
 6        "眼睛",
 7        "耳朵",
 8        "鼻子"
 9      ]
10    },{
11     "name":"李四",
12      "info":[
13        "眼睛",
14        "耳朵",
15        "鼻子"
16     ]
17  }];
18 
19  // 封裝一個函數，傳進去三個值（填充的內容（script標籤的id），（須要填充位置的id），（數據））
20  var fillTemplate = function(templateObj,contentObj,fillData){
21     var templateHtml = templateObj.html();
22     var template = Handlebars.compile(templateHtml);
23     contentObj.html(template(fillData));
24 };
25 
26  fillTemplate($("#table-template"),$("#dataList"),{data:data});

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。