Handlebars 查找助手以构建动态表

Question

我想使用把手构建一个动态表格。我认为我必须使用查找助手来实现我想要的结果。我在使用查找帮助程序时遇到了一些问题，而且文档也很差。

我的对象示例如下所示：

{
headers:[
  0:"name",
  1:"brand",
  2:"type",
  3:"rating",
  4:"edited"
]
tableContent:[
  0:{
     contentName:{
        name:"Fanta",
        brand:"Coca-Cola Company",
        type:"Soda",
        rating:"3",
        edited:"2017-05-24"}
    }
]
}

车把模板：

<script id="itemTemplate" type="text/x-handlebars-template">
  <table id="table" class="bordered highlight centered">
    <thead>
      <tr>
        {{#headers}}
        <th>{{this}}</th>
        {{/headers}}
      </tr>
    </thead>
    <tbody>
      <tr>
        {{#each tableContent}}
        {{#each headers}}
        <td>{{lookup ../contentName headers}}</td>
        {{/each}}
        {{/each}}
      </tr>
    </tbody>
  </table>
</script>

我不能简单地做<td> contentName.name </td>之类的原因是用户可以在数据库中创建自己的列，所以我无法事先知道属性名称。

Answer 1

在您的对象中使用little modification，您可以使用ember-contextual-table。

这里是the twiddle。

示例代码：

{{#data-table data=data.tableContent as |t|}}
  {{#each data.headers as |columnName|}}
    {{t.column propertyName=columnName name=columnName}}
  {{/each}}
{{/data-table}}

更新

但如果你想让你的代码运行，这里是：

  <table class="bordered highlight centered">
    <thead>
      <tr>
        {{#each data.headers as |header|}}
        <th>{{header}}</th>
        {{/each}}
      </tr>
    </thead>
    <tbody>
      <tr>
        {{#each data.tableContent as |c|}}
          {{#each data.headers as |h|}}
          <td>{{get c h}}</td>
          {{/each}}
        {{/each}}
      </tr>
    </tbody>
  </table>

看看this twiddle