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

你在计算错误的财产。 convs中只有一个crvs，crvs中只有model个Ember.computed('model.@each.crvs.convs', function() {：

{{1}}

计算的@each属性未更新

3 个答案: