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

Handlebars查找助手以构建动态表

1 个答案: