循环遍历模板中的 Ember 数据模型属性答案

【问题标题】：Looping Through Ember-Data Model Attrs in a Template循环遍历模板中的 Ember 数据模型属性
【发布时间】：2015-08-27 23:30:20
【问题描述】：

我试图弄清楚如何动态循环通过我已传递到 Ember 2.0 中的组件的 Ember 数据模型的 DS.attr。这是我所拥有的：

模板：

{{!person-component.hbs}}
{{each-in person as |property value|}}
  <tr>
    <th>
      <td>{{property}}</td>
      <td>{{value}}</td>
    </th>
  </tr>
{{/each-in}}

{{!index.hbs}}
{{person-component person=model}}

型号：

import DS from 'ember-data';

export default DS.Model.extend({
  "name": DS.attr('string'),
  "height": DS.attr('number'),
  "weight": DS.attr('number'),
});

路线：

import Ember from 'ember';

export default Ember.Route.extend({
  model() {
    return this.store.find('person');
  }
});

有没有一种简单的方法可以在车把中做到这一点？我可能在想，控制器上的计算值可能必须这样做。

【问题讨论】：

你是从哪里得到的？你的代码没有意义。
这是 Ember 2.0 的新功能。
啊，现在是2.1测试版，可惜没看到博文。

标签： javascript ember.js ember-data handlebars.js

【解决方案1】：

好的，所以each-in 并不是为了神奇地拆箱 Ember 模型属性而设计的，只有普通的 JSON 对象。所以解决方案是使用控制器逻辑来获取模型的属性。可能有更好的方法来做到这一点，但这是我在有限的 Ember 经验中发现的最干净的方法。

// app/controllers/person.js

import Ember from 'ember';

export default Ember.Component.extend({
  attributes: Ember.computed(function() {
    var attrNames = [];
    var person = this.get('person');

    // Get attributes
    person.eachAttribute((name) => attrNames.push(name));

    var attrs = Ember.getProperties(person, attrNames);
    return attrs;
  }),
});

如果您使用上面的代码实现这一点，只要您将模板修改为使用attributes 而不是person，一切都会按预期进行。

【讨论】：

【解决方案2】：

只要您使用的是 Ember 2.1 Beta，您的代码应该可以正常工作。请参阅有关新的 each-in 助手的博客文章。

http://emberjs.com/blog/2015/08/16/ember-2-1-beta-released.html#toc_code-each-in-code-helper

此助手的工作方式与您发布的完全一样。

编辑

实际上，根据 cmets 的说法，get 和 each-in 助手实际上已经潜入 Ember 2.0（未公布），请参阅此处的评论：http://emberjs.com/blog/2015/08/16/ember-2-1-beta-released.html#comment-2202060073，因此无需使用测试版。

【讨论】：