1 <!DOCTYPE html> 2 <html> 3 <head> 4 <META http-equiv=Content-Type content="text/html; charset=utf-8"> 5 <title>each-循環中使用this - by 楊元</title> 6 </head> 7 <body> 8 <h1>each-循環中使用this</h1> 9 <!--基礎html框架--> 10 <table> 11 <thead> 12 <tr> 13 <th>姓名</th> 14 <th>性別</th> 15 <th>年齡</th> 16 </tr> 17 </thead> 18 <tbody id="tableList"> 19 20 </tbody> 21 </table> 22 23 <!--插件引用--> 24 <script type="text/javascript" src="script/jquery.js"></script> 25 <script type="text/javascript" src="script/handlebars-1.0.0.beta.6.js"></script> 26 27 <!--Handlebars.js模版--> 28 <!--Handlebars.js模版放在script標簽中，保留了html原有層次結構,模版中要寫一些操作語句--> 29 <!--id可以用來唯一確定一個模版,type是模版固定的寫法--> 30 <script id="table-template" type="text/x-handlebars-template"> 31 {{#each this}} 32 <tr> 33 <td>{{name}}</td> 34 <td>{{sex}}</td> 35 <td>{{age}}</td> 36 </tr> 37 {{/each}} 38 </script> 39 40 <!--進行數據處理、html構造--> 41 <script type="text/javascript"> 42 $(document).ready(function() { 43 //模擬的json對象 44 var data = [ 45 { 46 "name": "張三", 47 "sex": "0", 48 "age": 18 49 }, 50 { 51 "name": "李四", 52 "sex": "0", 53 "age": 22 54 }, 55 { 56 "name": "妞妞", 57 "sex": "1", 58 "age": 18 59 } 60 ]; 61 62 //注冊一個Handlebars模版，通過id找到某一個模版，獲取模版的html框架 63 //$("#table-template").html()是jquery的語法，不懂的童鞋請惡補。。。 64 var myTemplate = Handlebars.compile($("#table-template").html()); 65 66 //將json對象用剛剛注冊的Handlebars模版封裝，得到最終的html，插入到基礎table中。 67 $('#tableList').html(myTemplate(data)); 68 }); 69 </script> 70 </body> 71 </html>
很多時候，我們拿到的json對象，本身就是一個list，並不是map，直接就可以遍歷，不需要#each student這樣指定遍歷某個屬性。
此時可以用#each this，表示遍歷當前對象。
this表示當前上下文，非常靈活，以后還會提及，讀者可以舉一反三。