增加需求，一个班级人员众多，分成了很多的小组，每个小组有小组长，小组长的成员标号以组长编号开头往下顺，比如1.1、1.2这样，这样的需求怎么实现呢？怎么获父元素的索引呢？用类似{{../name}}这种语法访问父级循环中的属性，但是这样访问父级索引是不可以的，例如：{{../@index}}，这样写是不正确的。
一：引入1.引入jquery 2.引入handlebars
<!--引入jquery/handlebars-->
<script type="text/javascript" src="./js/jquery-3.0.0.min.js"></script>
<script type="text/javascript" src="./js/handlebars-v4.0.10.js"></script>
二：写handlebars模板
注意：1.我们要实现的需求就是给每个学生增加序号，我们要多增加一列名叫mumber。2.增加了组员数据family，要渲染出来，这里用到了{{#each family}}。
<tbody class="student-temp">
<script type="text/x-handlebars-template" id="student-temp">
{{#each student}}
<tr>
<td>number </td>
<td>aa</td>
<td>bb</td>
<td>cc</td>
<td>dd</td>
</tr>
{{#each family}}
<tr>
<td>number </td>
<td>aa</td>
<td>bb</td>
<td>cc</td>
<td>dd</td>
</tr>
{{/each}}
{{/each}}
</script>
</tbody>
三：handlebars的取值 {{变量名}}，这里注意关于组员的数据提取 {{#each family}}里面，续往下看~
<tbody class="student-temp">
<script type="text/x-handlebars-template" id="student-temp">
{{#each student}}
<tr>
<td>{{number @index}}</td>
<td>{{name}}</td>
<td>{{age}}</td>
<td>{{gender}}</td>
<td>{{fraction}}</td>
</tr>
{{#each family}}
<tr>
<td>{{../_index}}.{{number1 @index}}</td>
<td>{{name}}</td>
<td>{{age}}</td>
<td>{{gender}}</td>
<td>{{fraction}}</td>
</tr>
{{/each}}
{{/each}}
</script>
</tbody>
四：渲染数据
在这里注意看registerHelper方法~
<script>
// 模拟数据
var data = {
"student": [
{
"name": "柳1",
"age": '3',
"gender": '女',
"fraction": '34',
family:[
{
"name": "柳1.1",
"age": '3',
"gender": '女',
"fraction": '34',
},
{
"name": "柳1.2",
"age": '3',
"gender": '女',
"fraction": '34',
},
]
},
{
"name": "柳2",
"age": '3',
"gender": '女',
"fraction": '34',
family:[
{
"name": "柳2.1",
"age": '3',
"gender": '女',
"fraction": '34',
},
{
"name": "柳2.2",
"age": '3',
"gender": '女',
"fraction": '34',
},
{
"name": "柳2.3",
"age": '3',
"gender": '女',
"fraction": '34',
}
]
},
{
"name": "柳3",
"age": '3',
"gender": '女',
"fraction": '34',
}
]
};
console.log(data);
// 获取到handlebars这个模板中的全部html内容
var studentTemp = $('#student-temp').html();
// 编译
var HanStudent = Handlebars.compile(studentTemp);
//注册一个Handlebars Helper,用来将索引+1，因为默认是从0开始的
Handlebars.registerHelper('number',function (index) {
this._index = index+1;
//返回+1之后的结果
return this._index;
});
Handlebars.registerHelper('number1',function (index) {
this._index = index+1;
//返回+1之后的结果
return this._index;
});
//把编译完成的代码放入到 .student-temp 的这个容器中
$('.student-temp').html(HanStudent(data))
</script>
整个页面代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>index-demo</title>
<style>
table, th, td {
border: 1px solid red;
text-align: center;
}
</style>
</head>
<body>
<table>
<thead>
<tr>
<th>序号</th>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
<th>分数</th>
</tr>
</thead>
<tbody class="student-temp">
<script type="text/x-handlebars-template" id="student-temp">
{{#each student}}
<tr>
<td>{{number @index}}</td>
<td>{{name}}</td>
<td>{{age}}</td>
<td>{{gender}}</td>
<td>{{fraction}}</td>
</tr>
{{#each family}}
<tr>
<td>{{../_index}}.{{number1 @index}}</td>
<td>{{name}}</td>
<td>{{age}}</td>
<td>{{gender}}</td>
<td>{{fraction}}</td>
</tr>
{{/each}}
{{/each}}
</script>
</tbody>
</table>
<script type="text/javascript" src="./js/jquery-3.0.0.min.js"></script>
<script type="text/javascript" src="./js/handlebars-v4.0.10.js"></script>
<script>
// 模拟数据
var data = {
"student": [
{
"name": "柳1",
"age": '3',
"gender": '女',
"fraction": '34',
family:[
{
"name": "柳1.1",
"age": '3',
"gender": '女',
"fraction": '34',
},
{
"name": "柳1.2",
"age": '3',
"gender": '女',
"fraction": '34',
},
]
},
{
"name": "柳2",
"age": '3',
"gender": '女',
"fraction": '34',
family:[
{
"name": "柳2.1",
"age": '3',
"gender": '女',
"fraction": '34',
},
{
"name": "柳2.2",
"age": '3',
"gender": '女',
"fraction": '34',
},
{
"name": "柳2.3",
"age": '3',
"gender": '女',
"fraction": '34',
}
]
},
{
"name": "柳3",
"age": '3',
"gender": '女',
"fraction": '34',
}
]
};
console.log(data);
// 获取到handlebars这个模板中的全部html内容
var studentTemp = $('#student-temp').html();
// 编译
var HanStudent = Handlebars.compile(studentTemp);
//注册一个Handlebars Helper,用来将索引+1，因为默认是从0开始的
Handlebars.registerHelper('number',function (index) {
this._index = index+1;
//返回+1之后的结果
return this._index;
});
Handlebars.registerHelper('number1',function (index) {
this._index = index+1;
//返回+1之后的结果
return this._index;
});
//把编译完成的代码放入到 .student-temp 的这个容器中
$('.student-temp').html(HanStudent(data))
</script>
</body>
</html>
网友评论