07-循环中索引使用技巧(访问父级索引)

来源：互联网发布：淘宝店铺上传视频教程编辑：程序博客网时间：2024/06/05 17:21

 1 <!DOCTYPE html> 2 <html> 3   <head> 4     <META http-equiv=Content-Type content="text/html; charset=utf-8"> 5     <title>Handlebars.js循环中索引(@index)使用技巧 - by 杨元</title> 6   </head> 7   <body> 8     <h1>Handlebars.js循环中索引(@index)使用技巧</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-v1.3.0.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>{{@index}}.</td>35           <td>{{name}}</td>36           <td>{{sex}}</td>37           <td>{{age}}</td>38         </tr>39       {{/each}}40     </script>41     42     <!--进行数据处理、html构造-->43     <script type="text/javascript">44       var data = [{45         name: "张三",46         sex: "男",47         age: 3548       },{49         name: "李四",50         sex: "男",51         age: 2352       },{53         name: "甜妞",54         sex: "女",55         age: 1856       }];57       58       //解析模版59       var handle = Handlebars.compile($("#table-template").html());60       //生成html61       var html = handle(data);62       //插入到页面63       $("#tableList").append(html);64       65     </script>66   </body>67 </html>

虽然用{{@index}}可以获取到索引，但遗憾的是，索引是从0开始的。。。这样让人看起来很不舒服。因此，我们可以使用一个Helper来让索引+1，变成从1开始。

 1 <!DOCTYPE html> 2 <html> 3   <head> 4     <META http-equiv=Content-Type content="text/html; charset=utf-8"> 5     <title>Handlebars.js循环中索引(@index)使用技巧 - by 杨元</title> 6   </head> 7   <body> 8     <h1>Handlebars.js循环中索引(@index)使用技巧</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-v1.3.0.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>{{addOne @index}}.</td>35           <td>{{name}}</td>36           <td>{{sex}}</td>37           <td>{{age}}</td>38         </tr>39       {{/each}}40     </script>41     42     <!--进行数据处理、html构造-->43     <script type="text/javascript">44       var data = [{45         name: "张三",46         sex: "男",47         age: 3548       },{49         name: "李四",50         sex: "男",51         age: 2352       },{53         name: "甜妞",54         sex: "女",55         age: 1856       }];57       58       //注册索引+1的helper59       var handleHelper = Handlebars.registerHelper("addOne",function(index){60         //返回+1之后的结果61         return index+1;62       });63       //解析模版64       var handle = Handlebars.compile($("#table-template").html());65       //生成html66       var html = handle(data);67       //插入到页面68       $("#tableList").append(html);69       70     </script>71   </body>72 </html>

不要以为这就完事了，这只是一般情况，小菜还要介绍一个非常特殊的场景。

假如循环中套了一个循环，在内层循环中如何获取外层循环的索引呢？

我们已经知道，可以用类似{{../name}}这种语法访问父级循环中的属性，但是这样访问父级索引是不可以的，例如：{{../@index}}，这样写是不正确的。

我们可以通过一个小手段来获取。

写例子之前，小菜多废话几句，其实这个非常实用，可以创建分级的索引，比如1.1、1.2等，也可以用作特殊的标识，理解成分组。

  1 <!DOCTYPE html>  2 <html>  3   <head>  4     <META http-equiv=Content-Type content="text/html; charset=utf-8">  5     <title>Handlebars.js循环中索引(@index)使用技巧 - by 杨元</title>  6   </head>  7   <body>  8     <h1>Handlebars.js循环中索引(@index)使用技巧</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-v1.3.0.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>{{addOne @index}}</td> 35           <td>{{name}}</td> 36           <td>{{sex}}</td> 37           <td>{{age}}</td> 38         </tr> 39         {{#each family}} 40           <tr> 41             <td>{{../_index}}.{{@index}}</td> 42             <td>{{name}}</td> 43             <td>{{sex}}</td> 44             <td>{{age}}</td> 45           </tr> 46         {{/each}} 47       {{/each}} 48     </script> 49      50     <!--进行数据处理、html构造--> 51     <script type="text/javascript"> 52       var data = [{ 53         name: "张三", 54         sex: "男", 55         age: 35, 56         family: [{ 57           name: "张三儿子", 58           sex: "男", 59           age: 10, 60         },{ 61           name: "张三妻子", 62           sex: "女", 63           age: 33, 64         }] 65       },{ 66         name: "李四", 67         sex: "男", 68         age: 23, 69         family: [{ 70           name: "李四妻子", 71           sex: "女", 72           age: 23, 73         }] 74       },{ 75         name: "甜妞", 76         sex: "女", 77         age: 18, 78         family: [{ 79           name: "甜妞妈妈", 80           sex: "女", 81           age: 40, 82         },{ 83           name: "甜妞爸爸", 84           sex: "男", 85           age: 43, 86         },{ 87           name: "甜妞姥爷", 88           sex: "男", 89           age: 73, 90         }] 91       }]; 92        93       //注册索引+1的helper 94       var handleHelper = Handlebars.registerHelper("addOne",function(index){ 95         //利用+1的时机，在父级循环对象中添加一个_index属性，用来保存父级每次循环的索引 96         this._index = index+1; 97         //返回+1之后的结果 98         return this._index; 99       });100       //解析模版101       var handle = Handlebars.compile($("#table-template").html());102       //生成html103       var html = handle(data);104       //插入到页面105       $("#tableList").append(html);106       107     </script>108   </body>109 </html>

分享到此结束~~~祝读者学习愉快~~

作者：杨元
欢迎任何形式的转载，但请务必注明出处。

0 0