js模版引擎handlebars.js实用教程——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命令，这个命令可以让当前的上下文进入到一个属性中，{{#with favorite}}表示进入到favorite属性的上下文中，而favorite属性中又是一个list，因此可以用{{#each this}}进行遍历，表示遍历当前上下文环境，对于每次遍历，都是map结构，取name属性，最终拿到所有兴趣爱好。

 

 

 

posted @ 2013-12-12 16:02  杨元  阅读(13843)  评论(2)  编辑  收藏  举报