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});
时间： 2024-10-13 10:44:42