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

8/31/2015来源:CSS教程人气:685

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的路径表示一样,简单吧?