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