计算的@each 属性未更新

Question

我使用的是 ember 2.1.0 我有 2 个模型 - testGroup

export default DS.Model.extend({
tag: DS.attr('string'),
crvs: DS.hasMany('crv'),
skus: DS.hasMany('sku'),
isSKU: DS.attr('boolean', {defaultValue: true})
});

和 crv。

import DS from 'ember-data';

export default DS.Model.extend({
    tag: DS.attr('string'),
    ctr: DS.attr('number', {defaultValue: 10}),
    convs: DS.attr('number', {defaultValue: 10}),
    testGroup: DS.belongsTo('testGroup')
});

在组件模板中，我显示了 testGroup.crvs 中的所有项目，并且能够更改 ctr/convs。

{{#each model.crvs as |crv|}}
    <tr>
        <td>{{crv.tag}}</td>
        <td>{{input value=crv.ctr}}</td>
        <td>{{input value=crv.convs}}</td>
    </tr>
{{/each}}

最后我想显示总数：

<div>Phases: {{total}}%</div>

对于这个问题，我在我的组件中创建了一个计算属性：

total: Ember.computed('model.crvs.@each.convs', function() {
    var crvs = this.get('model').get('crvs');
    if (crvs) {
        var tmp = 0;
        crvs.forEach(function(crv) {
            tmp += parseFloat(crv.get('convs'));
        });
        return tmp;
    } else {
        return 0;
    }
}),

它在页面呈现时显示正确的值，但是当我更改 crvs 集合中的值时，计算的属性没有改变。我可以在 ember 控制台中看到新的价值。

我的财产有什么问题？

更新 我发现了奇怪的行为。 CRVs 集合带有来自服务器的测试组：

{
            'testGroup': {
                'id': 12,
                'tag': 'foo',
                'crvs': [1, 2]
            },
            'crvs': [
                {
                    id: 1,
                    tag: 'crv1234',
                    ctr: 10,
                    convs: 6,
                    testGroup: 12,
                },
                {
                    id: 2,
                    tag: 'crv1235',
                    ctr: 10,
                    convs: 7,
                    testGroup: 12,
                }
            ]
        }

对于这个集合，计算属性不起作用。但是，如果我更改为用户在 UI 中添加的 model.skus 集合，如下所示：

var sku = this.get('targetObject.store').createRecord('sku', {
                catalogName: this.get('catalog').displayName,
                testGroup: this.get('model'),
                id: this.get('sku').sku,
                value: this.get('skuValue')
            });
            this.get('model').get('skus').pushObject(sku);

然后计算属性对于此类项目可以正常工作。 所以这种行为对我来说很奇怪。

Answer 1

我想我遇到了同样的问题。有一个 bug with Ember 2.1/2.2 会破坏使用 @each 的关系的计算属性。

有一个解决方法：使用content.@each 而不是@each

total: Ember.computed('model.crvs.content.@each.convs', function() {
    var crvs = this.get('model').get('crvs');
    if (crvs) {
        var tmp = 0;
        crvs.forEach(function(crv) {
            tmp += parseFloat(crv.get('convs'));
        });
        return tmp;
    } else {
        return 0;
    }
}),

Pedro Rio 的参考答案：Model Computed Property not updating

Answer 2

试试这个：

使用[] 而不是'@each'

total: Ember.computed('model.crvs.[].convs', function() {
    var crvs = this.get('model').get('crvs');
    if (crvs) {
        var tmp = 0;
        crvs.forEach(function(crv) {
            tmp += parseFloat(crv.get('convs'));
        });
        return tmp;
    } else {
        return 0;
    }
}),

Answer 3

您计算错误的财产。 crvs 中只有一个convs，而model 中有多个crvs：

Ember.computed('model.@each.crvs.convs', function() {