在handlebars（基礎(chǔ)一）中簡(jiǎn)單的渲染了頁(yè)面，但是在真實(shí)的開發(fā)中后臺(tái)給我們的數(shù)據(jù)往往是嵌套關(guān)系的，我們不止渲染一項(xiàng)數(shù)據(jù)，有一個(gè)列表甚至是幾個(gè)列表怎么渲染呢？今天就要說說handlebars中的循環(huán){{#each data}}
一：引入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模板
注意：在需要渲染的html外層包上script標(biāo)簽，1.type要寫，且要寫對(duì)。2.給這個(gè)模板添加一個(gè)唯一的id值，不添加會(huì)找不到。注意咯！{{#each student }}這里是循環(huán)的代碼噢！意思就是說循環(huán)student 這個(gè)變量中的數(shù)據(jù)呢~，不明白不要緊待會(huì)我們一起看數(shù)據(jù)結(jié)構(gòu)。
<tbody class="student-temp">
<script type="text/x-handlebars-template" id="student-temp">
{{#each student}}
<tr>
<td>aa</td>
<td>bb</td>
<td>cc</td>
<td>dd</td>
</tr>
{{/each}}
</script>
</tbody>
三：handlebars的取值 {{變量名}}
<tbody class="student-temp">
<script type="text/x-handlebars-template" id="student-temp">
{{#each student}}
<tr>
<td>{{name}}</td>
<td>{{age}}</td>
<td>{{gender}}</td>
<td>{{fraction}}</td>
</tr>
{{/each}}
</script>
</tbody>
四：渲染數(shù)據(jù)
在這里注意看數(shù)據(jù)結(jié)構(gòu)噢~
<script>
// 模擬數(shù)據(jù)
var data = {
"student": [
{
"name": "柳2",
"age": '8',
"gender": '女',
"fraction": '89'
},
{
"name": "柳3",
"age": '9',
"gender": '女',
"fraction": '89'
},
{
"name": "柳4",
"age": '10',
"gender": '女',
"fraction": '89'
}]
};
console.log(data);
// 獲取到handlebars這個(gè)模板中的全部html內(nèi)容
var studentTemp = $('#student-temp').html();
// 編譯
var HanStudent = Handlebars.compile(studentTemp);
//把編譯完成的代碼放入到 .student-temp 的這個(gè)容器中
$('.student-temp').html(HanStudent(data))
</script>
整個(gè)頁(yè)面代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>each-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>分?jǐn)?shù)</th>
</tr>
</thead>
<tbody class="student-temp">
<script type="text/x-handlebars-template" id="student-temp">
{{#each student}}
<tr>
<td>{{name}}</td>
<td>{{age}}</td>
<td>{{gender}}</td>
<td>{{fraction}}</td>
</tr>
{{/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>
// 模擬數(shù)據(jù)
var data = {
"student": [
{
"name": "柳2",
"age": '8',
"gender": '女',
"fraction": '89'
},
{
"name": "柳3",
"age": '9',
"gender": '女',
"fraction": '89'
},
{
"name": "柳4",
"age": '10',
"gender": '女',
"fraction": '89'
}]
};
console.log(data);
// 獲取到handlebars這個(gè)模板中的全部html內(nèi)容
var studentTemp = $('#student-temp').html();
// 編譯
var HanStudent = Handlebars.compile(studentTemp);
//把編譯完成的代碼放入到 .student-temp 的這個(gè)容器中
$('.student-temp').html(HanStudent(data))
</script>
</body>
</html>
