-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathif.html
74 lines (70 loc) · 1.68 KB
/
if.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>each-基本循环使用方法</title>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script src="js/handlebars.js" type="text/javascript" charset="utf-8"></script>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
h1,
table {
margin: 0 auto;
text-align: center;
}
</style>
</head>
<body>
<h1>each-基本循环使用方法</h1>
<!--基础html框架-->
<table>
<thead>
<tr>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
</tr>
</thead>
<tbody id="tableList">
</tbody>
</table>
</body>
<!--Handlebars.js模版-->
<!--Handlebars.js模版放在script标签中，保留了html原有层次结构,模版中要写一些操作语句-->
<!--id可以用来唯一确定一个模版,type是模版固定的写法-->
<script id="table-template" type="text/x-handlebars-template">
{{#each this}}
{{#if name}}
<tr>
<td>{{name}}</td>
<td>{{sex}}</td>
<td>{{age}}</td>
</tr>
{{/if}}
{{/each}}
</script>
<script type="text/javascript">
$(function() {
var data = [{
"name": "张三",
"sex": "0",
"age": "13"
}, {
"sex": "1",
"age": "15"
}, {
"name": "李亚光",
"sex": "0",
"age": "16"
}]
//注册一个Handlebars模版，通过id找到某一个模版，获取模版的html框架
var resource = $("#table-template").html();
var myTemplate = Handlebars.compile(resource);
//将json对象用刚刚注册的Handlebars模版封装，得到最终的html，插入到基础table中。
$('#tableList').html(myTemplate(data));
});
</script>
</html>