05-each嵌套

2024-04-27 15: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> 
 
          循環嵌套在稍微復雜點的頁面設計中即會涉及，Handlebars.js完全支持each嵌套，可以在each中使用each。
          上邊的例子演示了兩個關鍵點：each嵌套的可實現性、如何在each嵌套中讀取父each中的數據。
          例子很簡單，info本身是一個信息列表，是屬于某個人的，我們先用each遍歷所有的人，然后再遍歷每個人的info信息，這樣就形成了each嵌套。但是我們想在內層each中獲取外層each的數據，達到“誰的什么”這樣的顯示效果。
          顯然，如果直接在內層each中使用{{name}}，是取不到任何數據的，因為內層each的上下文是info，而name屬性在表示人的上下文中。
          此時，可以用{{../name}}從內層each獲取上一級each的name屬性，語法和html的路徑表示一樣，簡單吧？
 
 
 
作者：楊元歡迎任何形式的轉載，但請務必注明出處。