Handlebars.js中集合(list)通過中括號(hào)的方式取值

2017/2/16 8:31:26 閱讀：2026 發(fā)布者：2026

有這么一個(gè)需求，在一個(gè)table中，tr是通過each取值，
取出的值要與table標(biāo)題相對(duì)應(yīng)，如何實(shí)現(xiàn)？例如：

<table> 
  <thead> 
    <tr> 
　　　　{{#each 標(biāo)題集合，值舉例[name,sex...]}} 
　　　　　　{{this}} 
　　　　{{/each}} 
       得到結(jié)果應(yīng)是 
       <th>name</th> 
       <th>sex</th> 
    </tr> 
  </thead> 
　<tbody> 
　　{{#each 內(nèi)容集合，值舉例[{name:’蘇軾’,sex:’男’},{name:’李清照’,sex:’女’}...]}} 
      此時(shí)我想得到這樣的數(shù)據(jù)，與標(biāo)題想對(duì)應(yīng)，該如何做呢？ 
      <tr> 
         <td>蘇軾</td> 
         <td>男</td> 
      </tr> 
      <tr> 
        <td>李清照</td> 
        <td>女</td> 
      </tr> 
    {{/each}} 
　</tbody> 
</table>

如果在JS中，我們可以通過list[key]的方式取值，但是handlebars
好像不支持這種方式，不知道是不是我自己沒整明白

總之資料了找了半天，也沒有找到合適的解決方案，于是乎，自己寫吧，很簡(jiǎn)單。

Handlebars.registerHelper("getValueByKeyFromList", function(list, key, options){ 
    if(list && key && list[key]){ 
        return list[key]; 
    } 
    return; 
});

應(yīng)用到上面table中就是

{{#each 內(nèi)容集合，值舉例[{name:’蘇軾’,sex:’男’},{name:’李清照’,sex:’女’}...]}} 
    此時(shí)我想得到這樣的數(shù)據(jù)，與標(biāo)題想對(duì)應(yīng)，該如何做呢？ 
    <tr> 
      {{#each 標(biāo)題集合，值舉例[name,sex...]}} 
        <td>{{getValueByKeyFromList ../this this}}</td> 
        ../this 意為上一層集合的當(dāng)前值 
        this  意為當(dāng)前集合的當(dāng)前值 
      {{/each}} 
    </tr> 
{{/each}}