有这么一个需求,在一个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. Ubuntu系统Java开发环境的搭建

    操作系统:Linux x64 / Ubuntu 14.04 Java JDK版本:jdk-8u65-linux-x64.tar.gz 声明:转载请注明出处及本文链接 本文原文地址:Ubuntu系统Ja ...

  2. 利用keepalived构建高可用MySQL-HA

    关于MySQL-HA,目前有多种解决方案,比如heartbeat.drbd.mmm.共享存储,但是它们各有优缺点.heartbeat.drbd配置较为复杂,需要自己写脚本才能实现MySQL自动切换,对 ...

  3. Critical Regions和Guarded Regions区别

    KeEnterCriticalRegion和KeLeaveCriticalRegion配合使用,能禁止用户模式APC和普通内核模式APC的调用,但是不能禁止特殊内核模式的调用(NormalRoutin ...

  4. mysql8.0关闭log-bin功能

    一.查看log-bin是否开启: mysql> show variables like 'log-bin'; 二.关闭log-bin: 在配置文件中的 [mysqld] 配置节中增加 skip- ...

  5. 我们的GAME-TECH沙龙北京站完美收官了,都讨论了些啥?

    欢迎大家前往腾讯云+社区,获取更多腾讯海量技术实践干货哦~ 本文由 腾讯游戏云 团队首发与云+社区 摘要:4月13日,腾讯游戏云GAME-TECH游戏开发者技术沙龙于北京举办.此次活动是腾讯游戏云游戏 ...

  6. springboot主从数据库

    是从springmvc的思路上来做的,主要就是配置主.从DataSource,再继承AbstractRoutingDataSource,重写determineCurrentLookupKey方法,通过 ...

  7. serilization 序列化 transient 不被序列化

    Serizlizable 作用 对于一个存在于Java虚拟机中的对象来说,其内部的状态只保持在内存中.JVM停止之后,这些状态就丢失了.在很多情况下,对象的内部状态是需要被持久化下来的.提到持久化,最 ...

  8. [译]用R语言做挖掘数据《四》

    回归 一.实验说明 1. 环境登录 无需密码自动登录,系统用户名shiyanlou,密码shiyanlou 2. 环境介绍 本实验环境采用带桌面的Ubuntu Linux环境,实验中会用到程序: 1. ...

  9. MyBatis学习(三)---MyBatis和Spring整合

    想要了解MyBatis基础的朋友可以通过传送门: MyBatis学习(一)---配置文件,Mapper接口和动态SQL http://www.cnblogs.com/ghq120/p/8322302. ...

  10. C# 调用C/C++动态链接库,结构体中的char*类型

    用C#掉用C++的dll直接import就可以之前有不同的类型对应,当要传递结构体的时候就有点麻烦了,这里有一个结构体里边有char*类型,这个类型在C#中调用没法声明,传string是不行的默认st ...