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的路徑表示一樣，簡單吧？