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

<!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>

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

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

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

  2. JQuery在循环中绑定事件的问题详解

    JQuery在循环中绑定事件的问题详解 有个页面上需要N个DOM,每个DOM里面的元素ID都要以数字结尾,比如说 ? 1 2 3 <input type="text" nam ...

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

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

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

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

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

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

  6. 使用jQuery+huandlebars循环遍历中使用索引

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

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

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

  8. jQuery获取循环中的选中单选按钮radio的值

    1.<input type="radio" name="testradio" value="jquery获取radio的值" /> ...

  9. 使用jQuery+huandlebars遍历中if判断

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

随机推荐

  1. day 12 名称空间和闭包函数

    函数嵌套 按照函数的两个阶段分为: 嵌套调用:在一个函数内部调用另一个函数 嵌套定义:在一个函数内部定义另一个函数 名称空间(namespace):存储名字的内存区域 名称空间的分类: 内置名称空间: ...

  2. Linux下不停止服务,清空nohup.out文件

    转载:http://www.sucheasy.com/OracleFusionMiddleware/640.html 1.nohup.out的由来及作用 用途:LINUX命令用法,不挂断地运行命令. ...

  3. SpringBoot配置SSL证书支持

    Spring Boot配置ssl证书 一.申请SSL证书 在各大云服务商都可以申请到SSL官方证书. 我这里是在阿里云上申请的,申请后下载,解压.如图:  二.用JDK中keytool是一个证书管理工 ...

  4. 面向对象的编程思想和Java中类的概念与设计

    面向对象的编程思想学习,面向对象内容的三条主线;1.java类及类的对象2.面向对象的三大特征3.其他关键字学习内容:3.1面向对象与面向过程面向对象与面向过程在应用上的区别 Java中类的概念与设计 ...

  5. EBS获取code_combination_id（CCID）时段值自动被置为默认值的问题

    EBS中在使用标准的API(FND_FLEX_EXT.GET_COMBINATION_ID 和 FND_FLEX_EXT.GET_CCID还有fnd_flex_keyval.validate_segs ...

  6. Linux双线双网卡双IP双网关设置方法

    机房上架了一台测试机,系统是Ubuntu 9.04 X64的系统,母机IBM X336机器.用户需求是双线,故采用一个网卡配置电信地址,另一个网卡配置联通地址,安装好系统后配置好IP发现联通地址和电信 ...

  7. 在子页面操作父页面元素和iframe说明

    实现功能:在子页面操作父页面元素. 在实际编码的过程中,大家一定有这种需求:在父级页面有一个<iframe scrolling='auto'></iframe>内联框架,而我们 ...

  8. 怎样使用PL/SQL在不安装oracle 客户端的情况下使用oracle数据库

    在网上查了好多这方面的例子,但是似乎说的都不准确,在咨询朋友后终于实现了本机不安装oracle 的情况下,在windows系统上实现连接服务器上的数据库,现在贴出来与大家共享. 首先,我们需要一个PL ...

  9. Python变量以及类型

    变量的定义 在程序中,有时我们需要对2个数据进行求和,那么该怎样做呢? 大家类比一下现实生活中,比如去超市买东西,往往咱们需要一个菜篮子,用来进行存储物品,等到所有的物品都购买完成后,在收银台进行结账 ...

  10. 解决ubuntu16.04桌面左侧栏和顶部栏消失的问题

    重要事情说三遍! 不要轻易重装系统! 不要轻易重装系统! 不要轻易重装系统! 问题所在:误删了unity桌面. 解决方法: $sudo apt-get install unity