jsモダリティエンジンhandlebars.jsユーティリティ——with-はある属性に入ります(あるコンテキスト環境に入ります).

28890 ワード

with

  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コマンドが必要です.このコマンドは現在のコンテキストを一つの属性に入れることができます.｛aah with favorite｝はfavorite属性の文脈に入ることを表しています.favorite属性の中にはlistがあります.だから｛ah each this｝で遍歴して、現在のコンテキスト環境を表します.最終的にすべての趣味を手に入れます.

js配列深さクローン