08-with-進入到某個屬性(進入到某個上下文環境)

2024-04-27 15:07:32

字體：大中小

來源：轉載

供稿：網友

  1 <!DOCTYPE html>  2 <html>  3   <head>  4     <META http-equiv=Content-Type content="text/html; charset=utf-8">  5     <title>with-進入到某個屬性(進入到某個上下文環境) - by 楊元</title>  6   </head>  7   <body>  8     <h1>with-進入到某個屬性(進入到某個上下文環境)</h1>  9     <!--基礎html框架--> 10     <table> 11       <thead> 12         <tr> 13           <th>姓名</th> 14           <th>性別</th> 15           <th>年齡</th> 16           <th>興趣愛好</th> 17         </tr> 18       </thead> 19       <tbody id="tableList"> 20          21       </tbody> 22     </table> 23      24     <!--插件引用--> 25     <script type="text/javascript" src="script/jquery.js"></script> 26     <script type="text/Javascript" src="script/handlebars-1.0.0.beta.6.js"></script> 27      28     <!--Handlebars.js模版--> 29     <!--Handlebars.js模版放在script標簽中，保留了html原有層次結構,模版中要寫一些操作語句--> 30     <!--id可以用來唯一確定一個模版,type是模版固定的寫法--> 31     <script id="table-template" type="text/x-handlebars-template"> 32       {{#each this}} 33         <tr> 34           <td>{{name}}</td> 35           <td>{{sex}}</td> 36           <td>{{age}}</td> 37           <td> 38             {{#with favorite}} 39               {{#each this}} 40                 <p>{{name}}</p> 41               {{/each}} 42             {{/with}} 43           </td> 44         </tr>  45       {{/each}} 46     </script> 47      48     <!--進行數據處理、html構造--> 49     <script type="text/javascript"> 50       $(document).ready(function() { 51         //模擬的json對象 52         var data = [ 53                         { 54                             "name": "張三", 55                             "sex": "0", 56                             "age": 18, 57                             "favorite": 58                             [ 59                               { 60                                 "name":"唱歌" 61                               },{ 62                                 "name":"籃球" 63                               } 64                             ] 65                         }, 66                         { 67                             "name": "李四", 68                             "sex": "0", 69                             "age": 22, 70                             "favorite": 71                             [ 72                               { 73                                 "name":"上網" 74                               },{ 75                                 "name":"足球" 76                               } 77                             ] 78                         }, 79                         { 80                             "name": "妞妞", 81                             "sex": "1", 82                             "age": 18, 83                             "favorite": 84                             [ 85                               { 86                                 "name":"電影" 87                               },{ 88                                 "name":"旅游" 89                               } 90                             ] 91                         } 92                     ]; 93          94         //注冊一個Handlebars模版，通過id找到某一個模版，獲取模版的html框架 95         //$("#table-template").html()是jquery的語法，不懂的童鞋請惡補。。。 96         var myTemplate = Handlebars.compile($("#table-template").html()); 97          98         //將json對象用剛剛注冊的Handlebars模版封裝，得到最終的html，插入到基礎table中。 99         $('#tableList').html(myTemplate(data));100       });101     </script>102   </body>103 </html> 
 
     在循環每名學生時，學生的favorite屬性并不是一個普通的字符串，而又是一個json對象，確切的說是一個list，我們需要把學生的愛好全部取出來。
     這時候就需要with命令，這個命令可以讓當前的上下文進入到一個屬性中，{{#with favorite}}表示進入到favorite屬性的上下文中，而favorite屬性中又是一個list，因此可以用{{#each this}}進行遍歷，表示遍歷當前上下文環境，對于每次遍歷，都是map結構，取name屬性，最終拿到所有興趣愛好。
 
 
 
作者：楊元歡迎任何形式的轉載，但請務必注明出處。