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所用,可以使用 ...
随机推荐
- Android对敏感数据进行MD5加密(基础回顾)
1.在工具类的包下新建一个进行md5加密的工具类MD5Utils.java package com.example.mobilesafe.utils; import java.security.Mes ...
- js中window对象详解以及页面跳转
1.window.top.window.location = "index.asp"; 2.window.top.location.href="index.asp&quo ...
- Debian9安装桌面环境
更新安装源 apt-get update 安装 x-window apt-get install x-window-system-core 安装 gnomeapt-get install gnome- ...
- SQL Server学习3
SQL Server服务的管理 SQL Server服务 可以提供数据的存储,处理,受控访问,是SQL Server系统最基本的服务 SQL Server Analysis Server服务 为商业智 ...
- PHP项目学习2
通过<PHP项目学习1>基本上可以了解项目的大致结构.内容,现在直接从代码入手,开始coding吧. 现在部署环境中建立一个myonline的文件夹,便于放置我们的项目
- jquery里正则的使用方法及常用的正则验证
本文是一篇关于jquery使用正则来验证输入,及一些常用验证规则的基础文章,适合新手. 假设我们的网页里有这样的一个表单: <input id="aijquery" type ...
- Android Viewpage 滑块
依赖: implementation 'com.android.support:appcompat-v7:28.0.0' 在主页面layout <android.support.v4.view. ...
- [javaSE] GUI(jar包双击运行)
首先应该在java文件中定义包名,package 包名 带包编译成class文件 切换到目录下,使用jar -cvf xx.jar 包名,就是把那个包放到xx.jar包里面 此时双击会报错,找不到要执 ...
- 撩课-Web大前端每天5道面试题-Day14
1. 请写出至少5个html5新增的标签,并说明其语义和应用场景? section:定义文档中的一个章节; nav:定义只包含导航链接的章节; header:定义页面或章节的头部; 它经常包含 log ...
- 撩课-Web大前端每天5道面试题-Day8
1. 说说你对作用域链的理解? 作用域链的作用是保证执行环境里 有权访问的变量和函数是有序的, 作用域链的变量只能向上访问, 变量访问到window对象即被终止, 作用域链向下访问变量是不被允许的; ...