Question

我试图弄清楚如何动态循环遍历Ember-Data模型的DS.attr我已经传入Ember 2.0中的Component。这就是我所拥有的：

模板：

{{!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');
  }
});

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

Answer 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，一切都会按预期工作。

Answer 2

只要您使用Ember 2.1 Beta，您的代码就可以正常运行。请参阅有关新// @text Contains the text to match // @regex A regular expression object (f.e. /.+/) // @matchNames An array of literal strings where each item // is the name of each group function namedRegexMatch(text, regex, matchNames) { var matches = regex.exec(text); return matches.reduce(function(result, match, index) { if (index > 0) // This substraction is required because we count // match indexes from 1, because 0 is the entire matched string result[matchNames[index - 1]] = match; return result; }, {}); } var myString = "Hello Alex, I am John"; var namedMatches = namedRegexMatch( myString, /Hello ([a-z]+), I am ([a-z]+)/i, ["firstPersonName", "secondPersonName"] ); alert(JSON.stringify(namedMatches));帮助程序的博客文章。

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

此帮助程序的工作方式与您发布的完全相同。

修改

实际上，根据评论，each-in和get帮助实际上偷偷进入Ember 2.0（未经通知），请参阅此处的评论：http://emberjs.com/blog/2015/08/16/ember-2-1-beta-released.html#comment-2202060073，因此无需使用测试版

循环使用模板中的Ember-Data模型Att

2 个答案: