使用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>

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

Handlebars.js循环中索引(@index)使用技巧(访问父级索引)的更多相关文章

  1. 使用jQuery+huandlebars循环中索引(@index)使用技巧(访问父级索引)

    兼容ie8(很实用,复制过来,仅供技术参考,更详细内容请看源地址:http://www.cnblogs.com/iyangyuan/archive/2013/12/12/3471227.html) & ...

  2. 彻底弄懂js循环中的闭包问题

    来源:http://www.108js.com/article/article1/10177.html?id=899 第一次接触这个问题还是在我刚开始学js的时候,当时就是一头雾水,时隔一年多了,突然 ...

  3. JS循环中使用bind函数的参数传递问题

    JS循环中使用bind函数的参数传递问题,问题代码如下: for (var sc in result) { var tempp = '<div class="sidebar_todo_ ...

  4. java增强for循环中获取index

    java增强for循环中获取index http://rensanning.iteye.com/blog/2003205

  5. JsRender实用教程(tag else使用、循环嵌套访问父级数据)

    前言 JsRender是一款基于jQuery的JavaScript模版引擎,它具有如下特点: ·  简单直观 ·  功能强大 ·  可扩展的 ·  快如闪电 这些特性看起来很厉害,但几乎每个模版引擎, ...

  6. easyui中combotree只能选子选项，父级不被选中

    前言 前几天面试遇到一个需求(easyui中combotree只能选子选项,父级不被选中),回来特意整理下,大概的思想是如果该tree的节点被选中是判定一下是否有子节点,如果没有就说明是最终节点了,步 ...

  7. js循环中使用async/await踩过的坑

    最近写koa的时候遇见需要在循环中使用async/await的情况,当然第一反应就是直接上forEach,然后就直接翻车了... 直接上代码: function handleSql(val) { re ...

  8. js正则表达式中的问号使用技巧总结

    这篇文章主要介绍了js正则表达式中的问号几种用法,比如+?,*?,{2,3}?可以停止匹配的贪婪模式等例子的解析. 在表示重复的字符后面加问号,比如+?,*?,{2,3}?可以停止匹配的贪婪模式. v ...

  9. ThinkPHP 关联模型中查询某条记录的父级(非查询子级)

    数据表 id      cat_name      cat_pid 76     手机.数码     0 84     手机配件        76 86     蓝牙耳机        84 从属关 ...

随机推荐

  1. jdk1.8下载安装

    jdk8环境变量 jdk8图解安装 java8安装   1 2 3 4 5 6 7 分步阅读 JDK8 是JDK的最新版本,加入了很多新特性,如果我们要使用,需要下载安装: JDK8在windows ...

  2. cannot determine the location of the vs common tools folder

    问题:打开"VS2010开发人员命令提示后",上面提示"cannot determine the location of the vs common tools fold ...

  3. Microsoft.Office.Interop.Word.Document.Open returns null on Windows Server 2008 R2

    系统终于通过UAT,可以上线了.一遍测下来还行,可是为什么word转PDF就是不行呢?查了一下log,原来在wordApp.Documents.Open来打开生产的word文件的时候,返回一直是空.之 ...

  4. VIM的一些操作小技巧

    vim的设计理念是:组合. 命令的组合,模式的组合,     普通模式 左: h 上:k 下:j 右 : l   i : 当前光标处插入 I: 到光标所在行的行首进入插入模式 a: 在当前光标的后一位 ...

  5. mysql text字段判断是否为空

    mysql text字段判断是否为空 mysql text字段为空select * from `tableName` where `textField` is null or `textField` ...

  6. [转载]Firebird与MySQL:一个使用者的体会

    老板要我开发一个LINUX平台上的数据库项目,要求一定要用开源免费数据库.我知道这个数据库必须能够上网操作,同时作为公司的核心骨干数据库,除了必须是稳定的存储数据库外还必须有很强的数据和数据库控管功能 ...

  7. sass基本用法(转载)

    SASS入门教程及用法指南 2014年8月27日 8489次浏览 作为前端开发人员,你肯定对css很熟悉,但是你知道css可以自定义吗?大家都知道,js中可以自定义变量,css仅仅是一个标记语言,不是 ...

  8. MIPS ABI n32意味着什么？

    ABI是应用程序二进制接口的简称,用于标识处理器的工作模式及规范目标文件的编码格式. MIPS指令集架构自MIPS3起正式支持64位工作模式,故编码可以遵从o32(o意思是old).n32(n意思是n ...

  9. 原生JavaScript实现滚动条

    没事找事,明明overflow:scroll|auto就可以,只是难看点(实际上css也能设置).只当练习写拖拽.监听事件.位置检测了. 原理是对滑动条块进行监听,按下鼠标按键后,监听鼠标移动,然后根 ...

  10. 【细说Java】关于main方法的一些细节

    Public static void main(String[] args) public :main方法是jvm运行的入口,所以必须是public来供外部调用 static :main方法无需生成对 ...