如何使用字符串数组来引用 Ember 中模型属性的子集？

Question

我正在尝试在我的 Ember(ember-data) 模型中放置一个属性，它只是一个包含在通用 [=31 中的属性数组=] 组件。起初我只是将它添加到我的模型中：

tableColumns: function() {
  return ['age', 'gender', 'whatever'];
}.property()

但现在我发现自己在子组件中跳来跳去，轻松地遍历这些属性并为每个模型实例调用它们的值。

由于列会随着每个模型而变化，我认为这是一个很好的解决方案。有没有更好的办法？

特别是当我想针对每一行（模型实例）说一些不合理的事情时，就像下面的假想片段一样，我陷入了困境。

{{#each col in tableColumns}}
  <td>{{model.col}}</td>
{{/each}}

我正在努力保持无控制器并保持我的组件通用。

编辑：

我现在在行组件中执行此操作，然后在 hbs 中遍历 'cols'。但它感觉不对，我正在进入异步部分（一些列需要进行外部调用），我认为这会导致一些问题，所以我想找到更好的方法。

this.get('model').tableColumns().forEach(function(cell){
  cols.push(that.get('model._data.' + cell));
});

Answer 1

您似乎在编写数据 table 组件。我最近这样做了，但遗憾的是我不能与你分享我的代码。我将在一般意义上解释它是如何工作的：

首先，我定义了一个"column"objects的数组。每列都有一个 "property" 属性，以及其他属性（如 header 值、CSS 样式等）。

我的 data-table 组件标签如下所示：

{{data-table columns=columns content=content rowAction="open" empty-label="Nothing found."}}

在此示例中，columns 属性是我的列定义数组，content 是要显示的记录数组。

在组件的实现中，我的模板是这样的：

<tbody>
  {{#each row in content}}
  <tr>
    {{#each column in columns}}
    <td>
      <div>{{tablecell row column}}</div>
    </td>
    {{/each}}
  </tr>
  {{else}}
  <tr>
    <td colspan="7"> <em>{{emptyLabel}}</em>
    </td>
  </tr>
  {{/each}}
</tbody>

最后，我使用了自定义车把组件 (tablecell)：

Ember.Handlebars.helper('tablecell', function(row, column, options) {
  if (!column.property) {
    Ember.warn('You must specify a "property" value for a table column:%@'.fmt(JSON.stringify(column)));
    return '';
  }
  // if it's a function, call passing the row object and return its value.
  if (typeof column.property === 'function') {
    return column.property(row);
  }
  // otherwise, it is a simple property name.  return it from the row object
  return row.get(column.property);
});

您可能会注意到我的 tablecell 助手可以处理 property 字符串或函数属性。这让我可以对显示值进行一些自定义调整。

我没有为您提供完整的解决方案，但希望这些信息足以帮助您继续前进！

如何使用字符串数组来引用 Ember 中模型属性的子集？

How to use an array of strings to refer to a subset of model properties in Ember?

ember.js

ember-data

htmlbars