javascript - 带有 belongsTo 的模型中的计算属性返回未定义

Question

我有 3 个模型。

// Product
export default DS.Model.extend({
    content: DS.attr('string'),
    creator: DS.belongsTo('user')
});

// User
export default DS.Model.extend({
    email: DS.attr('string'),
    products: DS.hasMany('product'),
    person: DS.belongsTo('person'),
    fullName: Ember.computed(function() {
        return `${this.get('person.firstname')} ${this.get('person.surname')}`;
    })
});

// Person
export default DS.Model.extend({
    firstname: DS.attr('string'),
    surname: DS.attr('string'),
    users: DS.hasMany('user')
});

我尝试在 Handlebars 中使用它。

{{#each products as |product|}}
    {{product.creator.fullName}}
{{/each}}

如您所见，User 模型中有一个计算属性。但它总是返回 undefined undefined 因为 this.get('person.firstname') 和 this.get('person.surname') 返回未定义。

Ember 检查器显示每个模型的数据。知道如何解决这个问题吗？

Answer 1

默认情况下关系是异步的并返回 promises .这意味着您在询问时没有数据。当您第一次询问数据时，它将被加载，您需要将依赖键添加到您的 computed property在解析 Person 模型时获取更新的 fullName。

附言。您可以查看诸如 ember-promise-helpers 之类的插件，以在您的模板中组织异步数据。

// User
export default DS.Model.extend({
    email: DS.attr('string'),
    products: DS.hasMany('product'),
    person: DS.belongsTo('person'),

    fullName: Ember.computed('person.{firstname,surname}', function() {
        return `${this.get('person.firstname')} ${this.get('person.surname')}`;
    })
});

// Person
export default DS.Model.extend({
    firstname: DS.attr('string'),
    surname: DS.attr('string'),
    users: DS.hasMany('user')
});