js模版引擎handlebars.js实用教程——each

时间:2021-05-06 14:29:54

返回目录

 

 1 <!DOCTYPE html>
2 <html>
3 <head>
4 <META http-equiv=Content-Type content="text/html; charset=utf-8">
5 <title>each-循环中使用this - by 杨元</title>
6 </head>
7 <body>
8 <h1>each-循环中使用this</h1>
9 <!--基础html框架-->
10 <table>
11 <thead>
12 <tr>
13 <th>姓名</th>
14 <th>性别</th>
15 <th>年龄</th>
16 </tr>
17 </thead>
18 <tbody id="tableList">
19
20 </tbody>
21 </table>
22
23 <!--插件引用-->
24 <script type="text/javascript" src="script/jquery.js"></script>
25 <script type="text/javascript" src="script/handlebars-1.0.0.beta.6.js"></script>
26
27 <!--Handlebars.js模版-->
28 <!--Handlebars.js模版放在script标签中,保留了html原有层次结构,模版中要写一些操作语句-->
29 <!--id可以用来唯一确定一个模版,type是模版固定的写法-->
30 <script id="table-template" type="text/x-handlebars-template">
31 {{#each this}}
32 <tr>
33 <td>{{name}}</td>
34 <td>{{sex}}</td>
35 <td>{{age}}</td>
36 </tr>
37 {{/each}}
38 </script>
39
40 <!--进行数据处理、html构造-->
41 <script type="text/javascript">
42 $(document).ready(function() {
43 //模拟的json对象
44 var data = [
45 {
46 "name": "张三",
47 "sex": "0",
48 "age": 18
49 },
50 {
51 "name": "李四",
52 "sex": "0",
53 "age": 22
54 },
55 {
56 "name": "妞妞",
57 "sex": "1",
58 "age": 18
59 }
60 ];
61
62 //注册一个Handlebars模版,通过id找到某一个模版,获取模版的html框架
63 //$("#table-template").html()是jquery的语法,不懂的童鞋请恶补。。。
64 var myTemplate = Handlebars.compile($("#table-template").html());
65
66 //将json对象用刚刚注册的Handlebars模版封装,得到最终的html,插入到基础table中。
67 $('#tableList').html(myTemplate(data));
68 });
69 </script>
70 </body>
71 </html>

 

 

     很多时候,我们拿到的json对象,本身就是一个list,并不是map,直接就可以遍历,不需要#each student这样指定遍历某个属性。

     此时可以用#each this,表示遍历当前对象。

     this表示当前上下文,非常灵活,以后还会提及,读者可以举一反三。