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属性，最终拿到所有兴趣爱好。
 
 
 
作者：杨元欢迎任何形式的转载，但请务必注明出处。