使用jQuery+huandlebars循环中索引(@index)使用技巧(访问父级索引)
兼容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)使用技巧(访问父级索引)的更多相关文章
- Handlebars.js循环中索引(@index)使用技巧(访问父级索引)
使用Handlebars.js过程中,难免会使用循环,比如构造数据表格.而使用循环,又经常会用到索引,也就是获取当前循环到第几次了,一般会以这个为序号显示在页面上. Handlebars.js中获取循 ...
- JQuery在循环中绑定事件的问题详解
JQuery在循环中绑定事件的问题详解 有个页面上需要N个DOM,每个DOM里面的元素ID都要以数字结尾,比如说 ? 1 2 3 <input type="text" nam ...
- java增强for循环中获取index
java增强for循环中获取index http://rensanning.iteye.com/blog/2003205
- JsRender实用教程(tag else使用、循环嵌套访问父级数据)
前言 JsRender是一款基于jQuery的JavaScript模版引擎,它具有如下特点: · 简单直观 · 功能强大 · 可扩展的 · 快如闪电 这些特性看起来很厉害,但几乎每个模版引擎, ...
- easyui中combotree只能选子选项,父级不被选中
前言 前几天面试遇到一个需求(easyui中combotree只能选子选项,父级不被选中),回来特意整理下,大概的思想是如果该tree的节点被选中是判定一下是否有子节点,如果没有就说明是最终节点了,步 ...
- 使用jQuery+huandlebars循环遍历中使用索引
兼容ie8(很实用,复制过来,仅供技术参考,更详细内容请看源地址:http://www.cnblogs.com/iyangyuan/archive/2013/12/12/3471227.html) & ...
- ThinkPHP 关联模型中查询某条记录的父级(非查询子级)
数据表 id cat_name cat_pid 76 手机.数码 0 84 手机配件 76 86 蓝牙耳机 84 从属关 ...
- jQuery获取循环中的选中单选按钮radio的值
1.<input type="radio" name="testradio" value="jquery获取radio的值" /> ...
- 使用jQuery+huandlebars遍历中if判断
兼容ie8(很实用,复制过来,仅供技术参考,更详细内容请看源地址:http://www.cnblogs.com/iyangyuan/archive/2013/12/12/3471227.html) & ...
随机推荐
- Beta周王者荣耀交流协会第四次Scrum会议
1.立会照片 成员王超,高远博,冉华,王磊,王玉玲,任思佳,袁玥全部到齐. master:任思佳 2.时间跨度: 2017年11月13日 11:40 — 12:10 ,总计30分钟. 3.地点: 一食 ...
- 详解Makefile 函数的语法与使用 (转)
使用函数: 在Makefile中可以使用函数来处理变量,从而让我们的命令或是规则更为的灵活和具有智能.make所支持的函数也不算很多,不过已经足够我们的操作了.函数调用后,函数的返回值可以当做变量来使 ...
- 关于Jordan标准形
[转载请注明出处]http://www.cnblogs.com/mashiqi 2017/06/25 设$A$是$n$维线性空间$V$上的线性变换,它的特征值与相应的代数重数分别为$\lambda_i ...
- Linux 挂载windows目录
1.默认情况下,Linux服务器会装有samba-client,但是没有装samba-server.但是访问Windows系统共享,安装有samba-client就可以了. [root@test ~] ...
- latex之注释快捷键
注释快捷键 ctrl+T:注释掉选中区域 ctrl_U:解除选中区域的注释
- yaf nginx 设置
#test1server { listen 80; listen [::]:80; root /vagrant_data/aaa/public; index index.html index.htm ...
- 14.python-CS编程
一.客户端/服务器架构1.C/S架构:(1)硬件C/S架构(打印机)(2)软件C/S架构(web服务)2.生活中的C/S架构:饭店是S端,所有食客是C端3.C/S架构与socket的关系:socke就 ...
- C++学习(三十六)(C语言部分)之 链表2
测试代码笔记如下: #include<stdio.h> #include<stdlib.h> typedef struct node { int data;//数据 struc ...
- c++ 快速读入输出
1. 读入优化 C++中有一个函数:getchar() ,用于读入字符,那么这跟读入整数有什么关系呢? 其实,经过类似高精度的处理,就可以实现类型转换啦! 下面是正负数读入优化模板: #include ...
- [c#]_ELVE_Message多功能用法
1. 当要显示如图3个按钮时,并要获得单击不同按钮的进行不同的相应时,可以在MessageBoxButtons后面添加一个.(应该英文的点,此处为了醒目,用中文代替)可以看到提示框下方需要几个按 ...