Handlebars.js中集合(list)通过中括号的方式取值
有这么一个需求,在一个table中,tr是通过each取值,取出的值要与table标题相对应,如何实现?例如:
<table>
<thead>
<tr>
{{#each 标题集合,值举例[name,sex...]}}
{{this}}
{{/each}}
得到结果应是
<th>name</th>
<th>sex</th>
</tr>
</thead>
<tbody>
{{#each 内容集合,值举例[{name:'苏轼',sex:'男'},{name:'李清照',sex:'女'}...]}}
此时我想得到这样的数据,与标题想对应,该如何做呢?
<tr>
<td>苏轼</td>
<td>男</td>
</tr>
<tr>
<td>李清照</td>
<td>女</td>
</tr>
{{/each}}
</tbody>
</table>
如果在JS中,我们可以通过list[key]的方式取值,但是handlebars好像不支持这种方式,不知道是不是我自己没整明白
总之资料了找了半天,也没有找到合适的解决方案,于是乎,自己写吧,很简单。
Handlebars.registerHelper("getValueByKeyFromList", function(list, key, options){
if(list && key && list[key]){
return list[key];
}
return;
});
应用到上面table中就是
{{#each 内容集合,值举例[{name:'苏轼',sex:'男'},{name:'李清照',sex:'女'}...]}}
此时我想得到这样的数据,与标题想对应,该如何做呢?
<tr>
{{#each 标题集合,值举例[name,sex...]}}
<td>{{getValueByKeyFromList ../this this}}</td>
../this 意为上一层集合的当前值
this 意为当前集合的当前值
{{/each}}
</tr>
{{/each}}
解决。
Handlebars.js中集合(list)通过中括号的方式取值的更多相关文章
- Handlebars.js 中文文档
Home » 前端 » Handlebars.js 中文文档 Handlebars.js 中文文档 Posted in 前端 By KeenWon On 2014年4月3日 Views: ...
- JavaScript学习12 JS中定义对象的几种方式
JavaScript学习12 JS中定义对象的几种方式 JavaScript中没有类的概念,只有对象. 在JavaScript中定义对象可以采用以下几种方式: 1.基于已有对象扩充其属性和方法 2.工 ...
- JavaScript学习12 JS中定义对象的几种方式【转】
avaScript学习12 JS中定义对象的几种方式 转自: http://www.cnblogs.com/mengdd/p/3697255.html JavaScript中没有类的概念,只有对象. ...
- JS中事件绑定的三种方式
以下是搜集的在JS中事件绑定的三种方式. 1. HTML onclick attribute <button type="button" id="upl ...
- js中声明Number的五种方式
转载自:http://www.jb51.net/article/34191.htm <!DOCTYPE html> <html> <head> <meta c ...
- js中定义变量的三种方式const,val,let 的区别
js中三种定义变量的方式const, var, let的区别. 1.const定义的变量不可以修改,而且必须初始化. 1 const b = 2;//正确 2 // const b;//错误,必须初始 ...
- 【温故知新】——原生js中常用的四种循环方式
一.引言 本文主要是利用一个例子,讲一下原生js中常用的四种循环方式的使用与区别: 实现效果: 在网页中弹出框输入0 网页输出“欢迎下次光临” 在网页中弹出框输入1 网页输出“查询中……” 在 ...
- js 定义像java一样的map方便取值【转】
js 定义像java一样的map方便取值. 百度有位大神说"js对象本身就是一种Map结构",这真是一段让人欢天喜地的代码. <script> //定义一个全局map ...
- 在LoadRunner中从数组类型的参数随机取值的方法
在LoadRunner中从数组类型的参数随机取值的方法 使用web_reg_save_param做关联后,有时候会有多个匹配值. 为了模仿用户行为随机取一个值为后续transcation所用,可以使用 ...
随机推荐
- python-Lock锁线程同步和互斥
#!/usr/bin/python #coding=utf-8 #线程间通信的同步与互斥操作-锁 import threading a=b=0 lock=threading.Lock() def va ...
- Ibatis框架之系统架构
如果用最简洁的话来总结 iBATIS 主要完成那些功能时,我想下面几个代码足够概括. Class.forName("oracle.jdbc.driver.OracleDriver" ...
- WPF中用后台C#代码为TabItem设置Background属性
TabItem tabItem = sender as TabItem; tabItem.Background = new ImageBrush(new BitmapImage(new Uri(@&q ...
- [中英对照]Why Redis beats Memcached for caching | 在cache化方面,为何Redis胜过Memcached?
对Memcached和Redis有兴趣的同学不妨花几分钟读一读本文,否则请飘过. Why Redis beats Memcached for caching | 在cache化方面,为何Redis胜过 ...
- 【转】winform程序textbox滚动条保持在最下面 内容不闪烁
在开发winform程序时,会用到textbox控件来显示信息,当把textbox的Multiline属性改为Ture时(即多行显示状态),ScrollBars属性改为Vertical(内容过多时,显 ...
- 周记6——css实现类似朋友圈九宫格缩略图完美展示
公司有在做一个类似qq空间的开发,发表说说避免不了的要有图片展示. 产品提出的空间缩略图的展示类似*信朋友圈那种效果--图片不变形.能看到中间部分. 这里给出3种解决方案(jsbin地址失效时可复制代 ...
- 关于设置服务器为https服务器
主要是设置IIS: step1:打开Internet 信息服务(IIS)管理器——选择网站,编辑绑定 step2:添加https,如下图,这样如果不设置SSL的话就两种都可以进去网站 如果想要设置 ...
- golang操作mysql数据库
golang操作mysql数据库 代码: mysql的增.删.改.查 package main import ( "database/sql" "fmt" &q ...
- 4、构造方法、this、super
构造方法 构造方法引入 * A:构造方法的引入 在开发中经常需要在创建对象的同时明确对象的属性值,比如员工入职公司就要明确他的姓名.年龄等属性信息. 那么,创建对象就要明确属性值,那怎么解决呢?也就是 ...
- idea搭建Spring Boot+Mybatis及使用教程
环境准备 idea 15 jDK tomcat maven 搭建方式 官网下载源码包解压缩 使用idea中的Spring initializr创建 这两种方法创建的项目完全相同,只是操作方式不一样 这 ...