有这么一个需求,在一个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)通过中括号的方式取值的更多相关文章

  1. Handlebars.js 中文文档

    Home  »  前端   »   Handlebars.js 中文文档 Handlebars.js 中文文档 Posted in 前端 By KeenWon On 2014年4月3日 Views:  ...

  2. JavaScript学习12 JS中定义对象的几种方式

    JavaScript学习12 JS中定义对象的几种方式 JavaScript中没有类的概念,只有对象. 在JavaScript中定义对象可以采用以下几种方式: 1.基于已有对象扩充其属性和方法 2.工 ...

  3. JavaScript学习12 JS中定义对象的几种方式【转】

    avaScript学习12 JS中定义对象的几种方式 转自:  http://www.cnblogs.com/mengdd/p/3697255.html JavaScript中没有类的概念,只有对象. ...

  4. JS中事件绑定的三种方式

    以下是搜集的在JS中事件绑定的三种方式.   1. HTML onclick attribute     <button type="button" id="upl ...

  5. js中声明Number的五种方式

    转载自:http://www.jb51.net/article/34191.htm <!DOCTYPE html> <html> <head> <meta c ...

  6. js中定义变量的三种方式const,val,let 的区别

    js中三种定义变量的方式const, var, let的区别. 1.const定义的变量不可以修改,而且必须初始化. 1 const b = 2;//正确 2 // const b;//错误,必须初始 ...

  7. 【温故知新】——原生js中常用的四种循环方式

    一.引言 本文主要是利用一个例子,讲一下原生js中常用的四种循环方式的使用与区别: 实现效果: 在网页中弹出框输入0   网页输出“欢迎下次光临” 在网页中弹出框输入1   网页输出“查询中……” 在 ...

  8. js 定义像java一样的map方便取值【转】

    js 定义像java一样的map方便取值.  百度有位大神说"js对象本身就是一种Map结构",这真是一段让人欢天喜地的代码. <script> //定义一个全局map ...

  9. 在LoadRunner中从数组类型的参数随机取值的方法

    在LoadRunner中从数组类型的参数随机取值的方法 使用web_reg_save_param做关联后,有时候会有多个匹配值. 为了模仿用户行为随机取一个值为后续transcation所用,可以使用 ...

随机推荐

  1. Maven仓库汇总

    来源:http://tianya23.blog.51cto.com/1081650/386908 1.maven 仓库地址: 共有的仓库http://repo1.maven.org/maven2/ht ...

  2. WPF中Style文件引用另一个Style文件中的样式

    第1种方法: 直接在当前Style文件(*.xaml)文件中使用: <ResourceDictionary.MergedDictionaries>来进行合并 <!-- 关键是注意so ...

  3. vue中过滤器比较两个数组取相同值

    在vue中需要比较两个数组取相同值 一个大数组一个 小数组,小数组是大数组的一部分取相同ID的不同name值 有两种写法,两个for循环和map写法 const toName = (ids, arr) ...

  4. redis数据类型(六)Sorted set类型

    一.sorted set类型 sorted set是有序集合,它在set的基础上增加了一个顺序属性,这一属性在添加修改元素的时候可以指定,每次指定后,会自动重新按新的值调整顺序.可以理解了有两列的 m ...

  5. 基于ASP.Net Core学习Docker技术第一步:在CentOS7安装Docker平台

    Docker技术几年前就火了,伴随着今年来devops的流行,这项技术一直被技术社区追捧.提起Docker很容易被默认为是Linux平台下的技术,.NET的技术跟他似乎没有沾边,不过那是对非.NET ...

  6. Ruby(2): 基本语法上

    表达式和变量: 这两点和其他主流的编程语言基本没有差别,这里直接跳过. 需要注意的是 ruby中 x=x+1 可以写成 x+=1 但是不支持 x++ , x-- 等一元运算符  比较运算符和表达式: ...

  7. yii2 页面加载警告框

    在视图页面代码如下 <?php use kartik\alert\Alert; echo Alert::widget([ 'type' => Alert::TYPE_INFO, 'titl ...

  8. facebook 登录开发记录

    1.注册一个 facebook 的账号 2.进入 facebook 开发者的网站.(也可以在 facebook 登录后,点击自己的名字进入用户信息页面,在该页面的底部有个“更多”的链接,点击进去会看到 ...

  9. Spring 学习(十)--- Dispatch 分发逻辑

    问题 : Spring 分发逻辑是如何的 概述 本文讲解Spring 请求到返回视图的分发过程. 分发逻辑 分发逻辑可以使用下图来表示. 总共七个步骤 : 接收请求,经过 DispatcherServ ...

  10. Docker学习(二): 镜像的使用与构建

    特别声明: 博文主要是学习过程中的知识整理,以便之后的查阅回顾.部分内容来源于网络(如有摘录未标注请指出).内容如有差错,也欢迎指正! =============系列文章============= 1 ...