兼容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>关于循环中索引的使用 - by 杨元</title>

  </head>

  <body>

    <h1>关于循环中索引的使</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>

    <!--注意！这个例子用的是新版本handlebars，旧版本不支持-->

    <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 student}}

      <tr>

        <td>{{addOne @index}}</td>

        <td>{{name}}</td>

        <td>{{sex}}</td>

        <td>{{age}}</td>

      </tr>

      {{/each}}

    </script>

    <!--进行数据处理、html构造-->

    <script type="text/javascript">

      $(document).ready(function() {

        //模拟的json对象

         var data = {

                      "student": [

                          {

                              "name": "张三",

                              "sex": "0",

                              "age": 18

                          },

                          {

                              "name": "李四",

                              "sex": "0",

                              "age": 22

                          },

                          {

                              "name": "妞妞",

                              "sex": "1",

                              "age": 19

                          }

                      ]

                  };

        //注册一个Handlebars模版，通过id找到某一个模版，获取模版的html框架

        //$("#table-template").html()是jquery的语法，不懂的童鞋请恶补。。。

        var myTemplate = Handlebars.compile($("#table-template").html());

        //注册一个Handlebars Helper,用来将索引+1，因为默认是从0开始的

        Handlebars.registerHelper("addOne",function(index,options){

          return parseInt(index)+1;

        });

        //将json对象用刚刚注册的Handlebars模版封装，得到最终的html，插入到基础table中。

        $('#tableList').html(myTemplate(data));

      });

    </script>

  </body>

</html>

使用jQuery+huandlebars循环遍历中使用索引的更多相关文章

  1. Java循环遍历中直接修改遍历对象

    Java 循环遍历中直接修改遍历对象如下,会报异常: for (ShopBaseInfo sp: sourceList) { if(sp.getId()==5){ sourceList.remove( ...

  2. jquery each循环遍历完再执行的方法

    jquery each循环遍历完再执行的方法 因为each是异步的 所以要加计数器. var eachcount=0; <pre> $(".emptytip").eac ...

  3. 关于js中循环遍历中顺序执行ajax的问题（vue）

    js里的循环,每次都是自顾自的走,它不等ajax执行好走完到success代码,就继续循环下一条数据了,这样数据就全乱了. 后来,想到试试ajax里async这个属性,async默认是true,即为异 ...

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

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

  5. Python的list循环遍历中，删除数据的正确方法

    在遍历list,删除符合条件的数据时,总是报异常,代码如下: num_list = [1, 2, 3, 4, 5] print(num_list) for i in range(len(num_lis ...

  6. *使用while循环遍历数组创建索引和自增索引值

    package com.chongrui.test;/* *使用while循环遍历数组 *  *  * */public class test {    public static void main ...

  7. jquery each循环遍历完再执行的方法 因为each是异步的 所以要加计数器.

    query each循环遍历完再执行的方法因为each是异步的 所以要加计数器.var eachcount=0;$(“.emptytip”).each(function(){ eachcount++c ...

  8. 关于js中循环遍历中顺序执行多个嵌套ajax的问题

    就是业务上需要完成一个功能,这个功能需要依次调用四个接口,后面接口的参数都依赖于前一个接口的返回值. 类似这样: var objArr = "从其他逻辑获得"; for(var n ...

  9. JQuery Each循环遍历每个元素

    输出每个 li 元素的文本: $("button").click(function(){ $("li").each(function(){ alert($(th ...

随机推荐

  1. Curl追踪请求延时问题

    背景原因:测试环境发现一个连接内网访问和外网访问延迟差别很大,内网访问很快.外网访问很慢.于是我们用curl来诊断问题所在的区域! 命令如下: curl -o /dev/null -s -w %{ti ...

  2. 【开发遇到的问题】Spring Mvc使用Jackson进行json转对象时，遇到的字符串转日期的异常处理（JSON parse error: Can not deserialize value of type java.util.Date from String[）

    1.问题排查 - 项目配置 springboot 2.1 maven配置jackson - 出现的场景: 服务端通过springmvc写了一个对外的接口,查询数据中的表,表中有一个字段属性是时间戳,返 ...

  3. RabbitMQ安装记录（windows10）

    RabbitMQ安装记录(windows10)   一.安装包准备 otp_win64_R16B03.exe(这里使用该版本,不支持ssl) otp_win64_19.0.exe(如果要开启ssl,请 ...

  4. Python基础-socketserver

    ocketserver通讯模块实现并发操作,基于select.epoll.socket.多线程,实现的正真多线程多并发 socketserver通讯模块底层调用的socket模块,只是它作了处理基于l ...

  5. zabbix与tomcat（六）

    一.zabbix监控远程tomcat的流程   Zabbix-server 找 zabbix Java Gateway获取Java数据 zabbix Java Gateway 找Java程序(zabb ...

  6. Docker之 数据持久化

    容器中数据持久化主要有两种方式: 数据卷(Data Volumes) 数据卷容器(Data Volumes Dontainers) 数据卷 数据卷是一个可供一个或多个容器使用的特殊目录,可以绕过UFS ...

  7. nodeppt：网页版 PPT

    资料 网址 github https://github.com/ksky521/nodeppt 网页版PPT(nodeppt 的介绍) http://deliazhi.com/2017/03/31/W ...

  8. mysql 将行拼接成字符串的方法

    见代码: ;//保证可以拼接足够长的字符串,没它 数据量大时会截断结果1 group by videoType 效果如下:

  9. 我是一个录像机（NVR）

    我是一个网络录像机,简称NVR.我的前辈是DVR,我们的区别很简单,DVR接的是模拟摄像机,我连接的是IP摄像机. 我的前辈DVR比我辛苦,因为模拟摄像机的模拟信号连过来之后,他要进行数字化.编码压缩 ...

  10. centos7+nginx+rtmp+ffmpeg搭建流媒体服务器(保存流目录与http目录不要随意配置，否则有权限问题)

    搭建nginx-http-flv-module升级代替rtmp模块,详情:https://github.com/winshining/nginx-http-flv-module/blob/master ...