使用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. 网络监测工具-iftop教程

    在类Unix系统中可以使用top查看系统资源.进程.内存占用等信息.查看网络状态可以使用netstat.nmap等工具.若要查看实时的网络流量,监控TCP/IP连接等,则可以使用iftop. 一.if ...

  2. Android常用库

    原文链接:http://www.jianshu.com/p/19368c2cdcaf 系统框架 1. 网络请求 Android Async HTTP Android异步HTTP库 AndroidAsy ...

  3. IOS9 新加关键字 nullable、nonnull、null_unspecified、null_resettable

    #import "ViewController.h" @interface ViewController () @property(nonatomic,nullable)NSStr ...

  4. 1015. Reversible Primes (20)

    the problem is from PAT,which website is http://pat.zju.edu.cn/contests/pat-a-practise/1015 this pro ...

  5. MyEclipse-6.5注冊码生成器源代码

    打开MyEclipse新建一个Javaproject,然后新建类,粘贴例如以下代码,就可以生成MyEclipse的注冊码 import java.io.BufferedReader; import j ...

  6. 安装Redis无错流程

    1.参考文章<安装3.0.3版本配置文章参考>http://www.iyunv.com/thread-89612-1-1.html 2.安装tcl组件包(安装Redis需要tcl支持) 下 ...

  7. (转) NAS(神经结构搜索)综述

    NAS(神经结构搜索)综述 文章转载自:http://www.tensorinfinity.com/paper_136.html 本文是对神经结构搜索(NAS)的简单综述,在写作的过程中参考了文献[1 ...

  8. 【POI 每日题解 #4】 [POI2008]MAF-Mafia

    [POI2008]MAF-Mafia 很容易看出是拓扑 但不容易想出来怎么做[可能是我太菜 首先 入度为零的人是肯定死不了的 接着 我们分成环和链分析 对于一个链 最多的情况就是顺着一个个开枪 最后剩 ...

  9. Baidu WebFE(FEX)团队开发 的 文件上传插件 WebUploader

    1.webUploader官网下载地址:http://fex.baidu.com/webuploader/ 直接下载代码,运行examples目录文件即可 2.webUploader上传demo:ht ...

  10. Excel中线性规划求解

    Excel中线性规划求解(如下图) 1. 设置目标输出单元格(蓝线线) 2. 设置线性规划模型目标函数中自变量(红线线) 3. 设置约束条件(黑色线) 4  如果目标函数中自变量要求是非负数,则勾选绿 ...