handlebars,each循环里面套each循环

时间:2023-03-08 16:06:07
handlebars,each循环里面套each循环

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

html代码

 !DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>handlebars循环套循环</title>
<style media="screen">
*{
margin: 0;
padding: 0;
list-style: none;
}
.time{
float:left;
width:100px;
}
.content{
float:left;
border-left:1px solid black;
width: 100px;
padding-left: 20px;
padding-bottom: 10px;
}
#dataList li{
clear: both;
}
</style>
</head> <body>
<div>
<ul id="dataList"> </ul>
</div>
<!-- 引入jquery、handlebars的JS文件 -->
<script type="text/javascript" src="../js/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="../js/handlebars.min.js"></script>
<!-- 创建一个script标签,把type属性改为:text/x-handlebars-template -->
<script id="table-template" type="text/x-handlebars-template">
<!-- 把data的数据进行循环 -->
{{#each data}}
<li>
<div class="time">
<p>{{name}}</p>
</div>
<div class="content">
<!-- 把data:info里面的数据再次进行循环 -->
{{#each info}}
<!-- info里面多个数据,所以这里可以直接连续打印多个this -->
<p>{{this}}</p>
{{/each}}
</div>
</li>
{{/each}}
</script> <script type="text/javascript" src="./index.js"></script> </body>
</html>

index.js代码:

 // JSON数据
var data = [
{
"name":"张三",
"info":[
"眼睛",
"耳朵",
"鼻子"
]
},{
"name":"李四",
"info":[
"眼睛",
"耳朵",
"鼻子"
]
}]; // 封装一个函数,传进去三个值(填充的内容(script标签的id),(需要填充位置的id),(数据))
var fillTemplate = function(templateObj,contentObj,fillData){
var templateHtml = templateObj.html();
var template = Handlebars.compile(templateHtml);
contentObj.html(template(fillData));
}; fillTemplate($("#table-template"),$("#dataList"),{data:data});