Handlebars.js循环中索引(@index)使用技巧(访问父级索引)

     使用Handlebars.js过程中,难免会使用循环,比如构造数据表格。而使用循环,又经常会用到索引,也就是获取当前循环到第几次了,一般会以这个为序号显示在页面上。

     Handlebars.js中获取循环索引很简单,只需在循环中使用{{@index}}即可。

Handlebars.js循环中索引(@index)使用技巧(访问父级索引)
 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: 35
48       },{
49         name: "李四",
50         sex: "",
51         age: 23
52       },{
53         name: "甜妞",
54         sex: "",
55         age: 18
56       }];
57       
58       //解析模版
59       var handle = Handlebars.compile($("#table-template").html());
60       //生成html
61       var html = handle(data);
62       //插入到页面
63       $("#tableList").append(html);
64       
65     </script>
66   </body>
67 </html>
View Code

Handlebars.js循环中索引(@index)使用技巧(访问父级索引)

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

Handlebars.js循环中索引(@index)使用技巧(访问父级索引)
 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: 35
48       },{
49         name: "李四",
50         sex: "",
51         age: 23
52       },{
53         name: "甜妞",
54         sex: "",
55         age: 18
56       }];
57       
58       //注册索引+1的helper
59       var handleHelper = Handlebars.registerHelper("addOne",function(index){
60         //返回+1之后的结果
61         return index+1;
62       });
63       //解析模版
64       var handle = Handlebars.compile($("#table-template").html());
65       //生成html
66       var html = handle(data);
67       //插入到页面
68       $("#tableList").append(html);
69       
70     </script>
71   </body>
72 </html>
View Code

 

Handlebars.js循环中索引(@index)使用技巧(访问父级索引)

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

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

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

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

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

Handlebars.js循环中索引(@index)使用技巧(访问父级索引)
  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       //生成html
103       var html = handle(data);
104       //插入到页面
105       $("#tableList").append(html);
106       
107     </script>
108   </body>
109 </html>
View Code

Handlebars.js循环中索引(@index)使用技巧(访问父级索引)

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

 

 

 

Handlebars.js循环中索引(@index)使用技巧(访问父级索引),布布扣,bubuko.com

Handlebars.js循环中索引(@index)使用技巧(访问父级索引)

上一篇:mysql之备份恢复


下一篇:如何设计一个易用的MVC框架