Handlebars.js循环中索引(@index)使用技巧(访问父级索引)
使用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)使用技巧(访问父级索引)的更多相关文章
- 使用jQuery+huandlebars循环中索引(@index)使用技巧(访问父级索引)
兼容ie8(很实用,复制过来,仅供技术参考,更详细内容请看源地址:http://www.cnblogs.com/iyangyuan/archive/2013/12/12/3471227.html) & ...
- 彻底弄懂js循环中的闭包问题
来源:http://www.108js.com/article/article1/10177.html?id=899 第一次接触这个问题还是在我刚开始学js的时候,当时就是一头雾水,时隔一年多了,突然 ...
- JS循环中使用bind函数的参数传递问题
JS循环中使用bind函数的参数传递问题,问题代码如下: for (var sc in result) { var tempp = '<div class="sidebar_todo_ ...
- java增强for循环中获取index
java增强for循环中获取index http://rensanning.iteye.com/blog/2003205
- JsRender实用教程(tag else使用、循环嵌套访问父级数据)
前言 JsRender是一款基于jQuery的JavaScript模版引擎,它具有如下特点: · 简单直观 · 功能强大 · 可扩展的 · 快如闪电 这些特性看起来很厉害,但几乎每个模版引擎, ...
- easyui中combotree只能选子选项，父级不被选中
前言 前几天面试遇到一个需求(easyui中combotree只能选子选项,父级不被选中),回来特意整理下,大概的思想是如果该tree的节点被选中是判定一下是否有子节点,如果没有就说明是最终节点了,步 ...
- js循环中使用async/await踩过的坑
最近写koa的时候遇见需要在循环中使用async/await的情况,当然第一反应就是直接上forEach,然后就直接翻车了... 直接上代码: function handleSql(val) { re ...
- js正则表达式中的问号使用技巧总结
这篇文章主要介绍了js正则表达式中的问号几种用法,比如+?,*?,{2,3}?可以停止匹配的贪婪模式等例子的解析. 在表示重复的字符后面加问号,比如+?,*?,{2,3}?可以停止匹配的贪婪模式. v ...
- ThinkPHP 关联模型中查询某条记录的父级(非查询子级)
数据表 id cat_name cat_pid 76 手机.数码 0 84 手机配件 76 86 蓝牙耳机 84 从属关 ...
随机推荐
- Mysql命令集
mysql远程授权GRANT ALL PRIVILEGES ON *.* TO 'root'@'%' IDENTIFIED BY '123.com' WITH GRANT OPTION;flush p ...
- React阶段开发总结
这次独立编写了React页面主要是数据切换.点击不同的按钮,Ajax请求不同的后台数据.数据驱动表格内容的显示.使用React组件开发. 开发中获得下面的心得: 1.后台给的地址早一点添加路由(写好数 ...
- Cracking-- 1.1 判断字符串中是否有重复字符
第三种方法为位运算的方法. 位运算符: << 左移 & 与 | 或 #include <iostream> #include <string> #incl ...
- yii 图片展示
<?= DetailView::widget([ 'model' => $model, 'attributes' => [ 'id', 'name', 'time', 'pic', ...
- js基础知识点总结
如何在一个网站或者一个页面,去书写你的js代码:1.js的分层(功能):jquery(tool) 组件(ui) 应用(app),mvc(backboneJs)2.js的规划():避免全局变量和方法(命 ...
- pragma
在所有的预处理指令中,#pragma指令可能是最复杂的了,它的作用是设定编译器的状态或者是指示编译器完成一些特定的动作.#pragma指令对每个 编译器给出了一个方法,在保持与C和C++语言完全兼容的 ...
- 天气预报API(六)：中国气象频道、腾讯天气--“新编码”接口的测试
说明 本文所有测试均以青岛为例. 本文所列接口城市代码(cityid)参数都使用的 "新编码": 全国城市代码列表(新) 本文接口均不是官方接口,仅供测试使用! 腾讯天气 空气质量 ...
- 数据库表中存在Text类型的属性时，写sql语句时需要注意喽！
之前,习惯性地写查询语句时,查询条件用“=”判断.今天写程序的时候,查询时突然报了一个错误:数据类型text 和varchar 在equal to 运算符中不兼容.查看了一下数据库发现,其中有一个属性 ...
- cognos制作报表流程
第一章 创建报表 制作ReportStudio报表,步骤如下图所示: 第二章 添加查询 1.点击中间栏的查询资源管理器,然后点击查询,就可以新建查询.步骤如下图所示: 2.点击查询出现的页面: 3.在 ...
- 也学习Java/JVM/GC(四)
GC日志分析 程序代码: public class JvmTest { public static void main(String[] args) { int m = 1024 * 1024; by ...