handlebars-----each嵌套

来源：互联网发布：代理服务器软件下载编辑：程序博客网时间：2024/06/01 07:30
 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>
注：each嵌套的可实现性、如何在each嵌套中读取父each中的数据。
     例子很简单，info本身是一个信息列表，是属于某个人的，我们先用each遍历所有的人，然后再遍历每个人的info信息，这样就形成了each嵌套。但是我们想在内层each中获取外层each的数据，达到“谁的什么”这样的显示效果。
     显然，如果直接在内层each中使用{{name}}，是取不到任何数据的，因为内层each的上下文是info，而name属性在表示人的上下文中。
0 0