前端录网站,记录前端点点滴滴,帮助程序猿快速成长!

js模版引擎handlebars.js实用教程——each-循环中使用this

js
返回目录
 1 <!DOCTYPE html>
 2 <html>
 3   <head>
 4     <META http-equiv=Content-Type content="text/html; charset=utf-8">
 5     <title>each-循环中使用this</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表示当前上下文,非常灵活,以后还会提及,读者可以举一反三。



转载请注明:前端录»js模版引擎handlebars.js实用教程——each-循环中使用this