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

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

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

 <!DOCTYPE html>
 <html>
   <head>
     <META http-equiv=Content-Type content="text/html; charset=utf-8">
     <title>Handlebars.js循环中索引(@index)使用技巧 - by 杨元</title>
   </head>
   <body>
     <h1>Handlebars.js循环中索引(@index)使用技巧</h1>
     <!--基础html框架-->
     <table>
       <thead>
         <tr>
           <th></th>
           <th>姓名</th>
           <th>性别</th>
           <th>年龄</th>
         </tr>
       </thead>
       <tbody id="tableList">

       </tbody>
     </table>

     <!--插件引用-->
     <script type="text/javascript" src="script/jquery.js"></script>
     <script type="text/javascript" src="script/handlebars-v1.3.0.js"></script>

     <!--Handlebars.js模版-->
     <!--Handlebars.js模版放在script标签中，保留了html原有层次结构,模版中要写一些操作语句-->
     <!--id可以用来唯一确定一个模版,type是模版固定的写法-->
     <script id="table-template" type="text/x-handlebars-template">
       {{#each this}}
         <tr>
           <td>{{@index}}.</td>
           <td>{{name}}</td>
           <td>{{sex}}</td>
           <td>{{age}}</td>
         </tr>
       {{/each}}
     </script>

     <!--进行数据处理、html构造-->
     <script type="text/javascript">
       var data = [{
         name: "张三",
         sex: "男",
         age: 35
       },{
         name: "李四",
         sex: "男",
         age: 23
       },{
         name: "甜妞",
         sex: "女",
         age: 18
       }];

       //解析模版
       var handle = Handlebars.compile($("#table-template").html());
       //生成html
       var html = handle(data);
       //插入到页面
       $("#tableList").append(html);

     </script>
   </body>
 </html>

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

 <!DOCTYPE html>
 <html>
   <head>
     <META http-equiv=Content-Type content="text/html; charset=utf-8">
     <title>Handlebars.js循环中索引(@index)使用技巧 - by 杨元</title>
   </head>
   <body>
     <h1>Handlebars.js循环中索引(@index)使用技巧</h1>
     <!--基础html框架-->
     <table>
       <thead>
         <tr>
           <th></th>
           <th>姓名</th>
           <th>性别</th>
           <th>年龄</th>
         </tr>
       </thead>
       <tbody id="tableList">

       </tbody>
     </table>

     <!--插件引用-->
     <script type="text/javascript" src="script/jquery.js"></script>
     <script type="text/javascript" src="script/handlebars-v1.3.0.js"></script>

     <!--Handlebars.js模版-->
     <!--Handlebars.js模版放在script标签中，保留了html原有层次结构,模版中要写一些操作语句-->
     <!--id可以用来唯一确定一个模版,type是模版固定的写法-->
     <script id="table-template" type="text/x-handlebars-template">
       {{#each this}}
         <tr>
           <td>{{addOne @index}}.</td>
           <td>{{name}}</td>
           <td>{{sex}}</td>
           <td>{{age}}</td>
         </tr>
       {{/each}}
     </script>

     <!--进行数据处理、html构造-->
     <script type="text/javascript">
       var data = [{
         name: "张三",
         sex: "男",
         age: 35
       },{
         name: "李四",
         sex: "男",
         age: 23
       },{
         name: "甜妞",
         sex: "女",
         age: 18
       }];

       //注册索引+1的helper
       var handleHelper = Handlebars.registerHelper("addOne",function(index){
         //返回+1之后的结果
         return index+1;
       });
       //解析模版
       var handle = Handlebars.compile($("#table-template").html());
       //生成html
       var html = handle(data);
       //插入到页面
       $("#tableList").append(html);

     </script>
   </body>
 </html>

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

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

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

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

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

 <!DOCTYPE html>
 <html>
   <head>
     <META http-equiv=Content-Type content="text/html; charset=utf-8">
     <title>Handlebars.js循环中索引(@index)使用技巧 - by 杨元</title>
   </head>
   <body>
     <h1>Handlebars.js循环中索引(@index)使用技巧</h1>
     <!--基础html框架-->
     <table>
       <thead>
         <tr>
           <th></th>
           <th>姓名</th>
           <th>性别</th>
           <th>年龄</th>
         </tr>
       </thead>
       <tbody id="tableList">

       </tbody>
     </table>

     <!--插件引用-->
     <script type="text/javascript" src="script/jquery.js"></script>
     <script type="text/javascript" src="script/handlebars-v1.3.0.js"></script>

     <!--Handlebars.js模版-->
     <!--Handlebars.js模版放在script标签中，保留了html原有层次结构,模版中要写一些操作语句-->
     <!--id可以用来唯一确定一个模版,type是模版固定的写法-->
     <script id="table-template" type="text/x-handlebars-template">
       {{#each this}}
         <tr>
           <td>{{addOne @index}}</td>
           <td>{{name}}</td>
           <td>{{sex}}</td>
           <td>{{age}}</td>
         </tr>
         {{#each family}}
           <tr>
             <td>{{../_index}}.{{@index}}</td>
             <td>{{name}}</td>
             <td>{{sex}}</td>
             <td>{{age}}</td>
           </tr>
         {{/each}}
       {{/each}}
     </script>

     <!--进行数据处理、html构造-->
     <script type="text/javascript">
       var data = [{
         name: "张三",
         sex: "男",
         age: 35,
         family: [{
           name: "张三儿子",
           sex: "男",
           age: 10,
         },{
           name: "张三妻子",
           sex: "女",
           age: 33,
         }]
       },{
         name: "李四",
         sex: "男",
         age: 23,
         family: [{
           name: "李四妻子",
           sex: "女",
           age: 23,
         }]
       },{
         name: "甜妞",
         sex: "女",
         age: 18,
         family: [{
           name: "甜妞妈妈",
           sex: "女",
           age: 40,
         },{
           name: "甜妞爸爸",
           sex: "男",
           age: 43,
         },{
           name: "甜妞姥爷",
           sex: "男",
           age: 73,
         }]
       }];

       //注册索引+1的helper
       var handleHelper = Handlebars.registerHelper("addOne",function(index){
         //利用+1的时机，在父级循环对象中添加一个_index属性，用来保存父级每次循环的索引
         this._index = index+1;
         //返回+1之后的结果
         return this._index;
       });
       //解析模版
       var handle = Handlebars.compile($("#table-template").html());
       //生成html
       var html = handle(data);
       //插入到页面
       $("#tableList").append(html);

     </script>
   </body>
 </html>

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