1 <!DOCTYPE html>
2 <html>
3 <head>
4 <META http-equiv=Content-Type content="text/html; charset=utf-8">
5 <title>with-进入到某个属性(进入到某个上下文环境) - by 杨元
</title>
6 </head>
7 <body>
8 <h1>with-进入到某个属性(进入到某个上下文环境)
</h1>
9 <!--基础html框架-->
10 <table>
11 <thead>
12 <tr>
13 <th>姓名
</th>
14 <th>性别
</th>
15 <th>年龄
</th>
16 <th>兴趣爱好
</th>
17 </tr>
18 </thead>
19 <tbody id="tableList">
20
21 </tbody>
22 </table>
23
24 <!--插件引用-->
25 <script type="text/javascript" src="script/jquery.js"></script>
26 <script type="text/javascript" src="script/handlebars-1.0.0.beta.6.js"></script>
27
28 <!--Handlebars.js模版-->
29 <!--Handlebars.js模版放在script标签中，保留了html原有层次结构,模版中要写一些操作语句-->
30 <!--id可以用来唯一确定一个模版,type是模版固定的写法-->
31 <script id="table-template" type="text/x-handlebars-template">
32 {{#each this}}
33 <tr>
34 <td>{{name}}</td>
35 <td>{{sex}}</td>
36 <td>{{age}}</td>
37 <td>
38 {{#with favorite}}
39 {{#each this}}
40 <p>{{name}}</p>
41 {{/each}}
42 {{/with}}
43 </td>
44 </tr>
45 {{/each}}
46 </script>
47
48 <!--进行数据处理、html构造-->
49 <script type="text/javascript">
50 $(document).ready(function() {
51 //模拟的json对象
52 var data = [
53 {
54 "name": "张三",
55 "sex": "0",
56 "age": 18,
57 "favorite":
58 [
59 {
60 "name":"唱歌"
61 },{
62 "name":"篮球"
63 }
64 ]
65 },
66 {
67 "name": "李四",
68 "sex": "0",
69 "age": 22,
70 "favorite":
71 [
72 {
73 "name":"上网"
74 },{
75 "name":"足球"
76 }
77 ]
78 },
79 {
80 "name": "妞妞",
81 "sex": "1",
82 "age": 18,
83 "favorite":
84 [
85 {
86 "name":"电影"
87 },{
88 "name":"旅游"
89 }
90 ]
91 }
92 ];
93
94 //注册一个Handlebars模版，通过id找到某一个模版，获取模版的html框架
95 //$("#table-template").html()是jquery的语法，不懂的童鞋请恶补。。。
96 var myTemplate = Handlebars.compile($("#table-template").html());
97
98 //将json对象用刚刚注册的Handlebars模版封装，得到最终的html，插入到基础table中。
99 $('#tableList').html(myTemplate(data));
100 });
101 </script>
102 </body>
103 </html>
在循环每名学生时，学生的favorite属性并不是一个普通的字符串，而又是一个json对象，确切的说是一个list，我们需要把学生的爱好全部取出来。
这时候就需要with命令，这个命令可以让当前的上下文进入到一个属性中，{{#with favorite}}表示进入到favorite属性的上下文中，而favorite属性中又是一个list，因此可以用{{#each this}}进行遍历，表示遍历当前上下文环境，对于每次遍历，都是map结构，取name属性，最终拿到所有兴趣爱好。
作者：杨元 欢迎任何形式的转载，但请务必注明出处。
转载请注明原文地址: https://ju.6miu.com/read-664034.html
