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

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

 

 

          循环嵌套在稍微复杂点的页面设计中即会涉及,Handlebars.js完全支持each嵌套,可以在each中使用each。

          上边的例子演示了两个关键点:each嵌套的可实现性、如何在each嵌套中读取父each中的数据。

          例子很简单,info本身是一个信息列表,是属于某个人的,我们先用each遍历所有的人,然后再遍历每个人的info信息,这样就形成了each嵌套。但是我们想在内层each中获取外层each的数据,达到“谁的什么”这样的显示效果。

          显然,如果直接在内层each中使用{{name}},是取不到任何数据的,因为内层each的上下文是info,而name属性在表示人的上下文中。

          此时,可以用{{../name}}从内层each获取上一级each的name属性,语法和html的路径表示一样,简单吧?

js模版引擎handlebars.js实用教程——each嵌套,古老的榕树,5-wow.com

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。