我正在尝试使用基于async,hasMany模型属性的值的计算属性,但无法在我的视图中显示它。
MyApp.Foo = DS.Model.extend({
title: DS.attr('string'),
peeps: DS.hasMany('peep', { async: true });
});
MyApp.Peep = DS.Model.extend({
name: DS.attr('string'),
email: DS.attr('string')
});
MyApp.Foo.FIXTURES = [
{ id: 1, title: 'nice', peeps: [1,2] }
];
MyApp.Peep.FIXTURES = [
{ id: 1, name: 'mypeep', email: 'peep@example.com' },
{ id: 2, name: 'mypeep2', email: 'peep2@example.com' }
];
MyApp.FooController = EmberObjectController.extend({
showPeeps: function() {
// This one works for this test data.
// return [{name: 'baz', email: 'bar'}];
var peepList = this.get('content.peeps.[]').then(function(c) {
// This one does not work, even for this test data.
return {name: 'baz', email: 'bar'}];
});
}.property('content.peeps.[]');
});
在我看来,有些东西:
{#each peep in controller.showPeeps}}{{peep.name}}{{/each}}
我可以使用console.log()看到“then()”中的所有数据,并且正如它在代码注释中所指出的那样,如果我从“then()”中获取返回值,它就会起作用 - 但是实际数据为空,因为它作为异步返回。如果我试图让它非同步,我得到
未捕获的TypeError:无法调用未定义的方法'resolve'
我尝试过很多计算属性代码的变种(使用@each,使用model.peeps - 所有这些都正确显示在console.log()中的数据,但在视图中没有。在视图中,它是总是未定义,除非我只是在then()之外返回虚拟数据 - 这显示正确)
我错过了什么?
答案 0 :(得分:8)
不要将hasMany关系视为承诺,将其视为数组。这就是DS.PromiseArray
的重点。如果您只是想要用户,甚至不需要使用计算属性,只需在模板中使用peeps
即可。但是,如果您需要以某种方式转换数据,请使用map
。
showPeeps: function() {
return this.get('peeps').map(function(peep) {
return { name: peep.name, email: peep.email };
});
}.property('peeps.@each')
另外,请勿观看[]
属性。只有在从阵列中添加或删除项目时才会更新。您的数组内容不会更改,内容的内容也在变化。您应该看一下@each
属性。您也不需要将[]
添加到属性名称的末尾,也不需要在属性前加content.
作为前缀。