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

序号是指：在循环过程中，当前循环的索引，说白了，就是当前为第几次循环，一般从0开始，Handlebars.js中也是如此。

有什么用呢？最常见的是在显示table的时候，给每行加一个序号，清晰的展示出页面上共有多少条记录，如上边的例子。

除此之外，小菜为了在循环中区分不同的id，恰好需要一个序号，确保id不重复，用过bootstrap的童鞋应该知道，好多事件可以通过id定位，例如Listgroup控件。

废话少说，在Handlebars.js中，可以通过{{@index}}来获取当前的索引，也就是说@index这个变量就代表了当前索引。

在上边的例子里，table的序号从0开始不太好，于是注册了一个Helper，将索引+1。

js模版引擎handlebars.js实用教程——循环中使用索引的更多相关文章

  1. js模版引擎handlebars.js实用教程

    js模版引擎handlebars.js实用教程 阅读本文需要了解基本的Handlebars.js概念,本文并不是Handlebars.js基础教程,而是注重于实际应用,为读者阐述使用过程中可能会遇到的 ...

  2. js模版引擎handlebars.js实用教程——为什么选择Handlebars.js

    返回目录 据小菜了解,对于java开发,涉及到页面展示时,比较主流的有两种解决方案: 1. struts2+vo+el表达式. 这种方式,重点不在于struts2,而是vo和el表达式,其基本思想是: ...

  3. js模版引擎handlebars.js实用教程——目录

    写在开头的话: 阅读本文需要了解基本的Handlebars.js概念,本文并不是Handlebars.js基础教程,而是注重于实际应用,为读者阐述使用过程中可能会遇到的一些问题. 实际上,小菜写这篇文 ...

  4. js模版引擎handlebars.js实用教程——each-基本循环使用方法

    返回目录 <!DOCTYPE html> <html> <head> <META http-equiv=Content-Type content=" ...

  5. js模版引擎handlebars.js实用教程——each嵌套

    <!DOCTYPE html> <html> <head> <META http-equiv=Content-Type content="text/ ...

  6. js模版引擎handlebars.js实用教程——with-进入到某个属性(进入到某个上下文环境)

    返回目录 <!DOCTYPE html> <html> <head> <META http-equiv=Content-Type content=" ...

  7. js模版引擎handlebars.js实用教程——each-循环中使用this

    返回目录 <!DOCTYPE html> <html> <head> <META http-equiv=Content-Type content=" ...

  8. js模版引擎handlebars.js实用教程——with-终极this应用

    返回目录 <!DOCTYPE html> <html> <head> <META http-equiv=Content-Type content=" ...

  9. js模版引擎handlebars.js实用教程——if-判断的基本用法

    返回目录 <!DOCTYPE html> <html> <head> <META http-equiv=Content-Type content=" ...

随机推荐

  1. ServiceStack.OrmLite中的一些"陷阱"（1）

    使用过ServiceStack.Ormlite的人都应该知道,其作为一个轻量级的ORM,使用的便捷度非常高,用起来就一个字:爽!而支撑其便捷度的,是库内大量地使用了扩展方法及静态变量. 首先先从源头入 ...

  2. RGB颜色中的参数是变量的时候，为什么要加上两个+号在左右？

    <script> function draw(){ var c=document.getElementById("mycanvas"); var cxt=c.getCo ...

  3. 关于window.open()中文传值乱码问题的解决方法

    最近组长叫我做一个把查询出的数据用POI导出Excel的功能,我前台把要查询的字段通过如下传回后台时,发现出现了乱码问题 window.open('user!export?name='+name); ...

  4. 使用nginx为ArcGIS Server做反向代理

    1.下载nginx软件:官网地址http://nginx.org/ 2.修改conf文件夹下nginx.conf配置信息, 配置文件中以下内容: server { listen       80; s ...

  5. Linux 忘记root登录密码解决方法

    很多朋友经常会忘记Linux系统的root密码,linux系统忘记root密码的情况该怎么办呢?重新安装系统吗?当然不用!进入单用户模式更改一下root密码即可. 步骤如下: 重启linux系统 3  ...

  6. SQL事物隔离级别

    标准SQL定义了4个隔离级别 Read uncommitted 未提交读 Read committed 已提交读 Repeatable read 可重复读 Serializable 可序列化 基本语法 ...

  7. surface上的手势事件

    surface上的手势事件 1.surface上的触控事件测试. 手指触控在CHROME和FIREFOX下会触发touch事件,而IE10是不支持touch事件的. 手指触控在三个浏览器下均会触发全部 ...

  8. Debian 7 安装 wireshark

    安装过程很简单: $ sudo apt-get install wireshark 其中会弹出一个对话框: ┌─────────────────────┤ Configuring wireshark- ...

  9. Hyper-V初涉：功能的添加与虚拟机的创建

    Hyper-V是微软提供的一款高效率的虚拟化管理软件,在早期的Windows服务器中配备Hyper-V组件,Windows 8是首次将企业用Hyper-V集成在个人系统中,可见虚拟化技术的发展之迅速. ...

  10. make基础（转）

    1. 基本规则 请点评 除了Hello World这种极简单的程序之外,一般的程序都是由多个源文件编译链接而成的,这些源文件的处理步骤通常用Makefile来管理.Makefile起什么作用呢?我们先 ...