handlebars，each循环里面套each循环

handlebars可以用each自动进行循环，下面介绍一下each循环里面套循环来着。

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代码：

 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});