通过动作设置控制器计算属性的Ember方法

Question

我是Ember的新手，我尝试遵循Data Down Action Up方法，将控制器作为主要的父“组件”，使许多组件向控制器发送动作，以设置模型的值，最终将这些值滴加下来。价值的组成部分。 我知道控制器将要消失，但如果您愿意，我需要此控制器保持所有状态...

我在方法上苦苦挣扎，因为我想在控制器上设置许多计算模型的属性，这些模型可以监视模型属性。 看来，最困难的是设置这些计算属性之一的值，当动作触发时，这些值需要设置其他属性。 这是我的一些控制器（请参见下面的更新示例，供参考）：

//controllers/groupPlanning.js

import Ember from 'ember';

export default Ember.Controller.extend({

    groups: Ember.computed('model.@each.groups', function(){
        return this.get('model').get('groups');
    }),

    enrollmentGroup: Ember.computed('groups', function(){
        this.get('groups').forEach(function(group) {
            if (group.get('name') === 'Enrollment'){
                return group;
            }
        }):

    }),

    enrollmentGroupPercent: Ember.computed('enrollmentGroup', function() {
        var group = this.get('enrollmentGroup');
        return group.get('year') * this.get('someOtherNumber');
    }),

   ...

    actions: {
        setGroupYear: function(year){
            var group = this.get('enrollmentGroup');
            group.set('year', year);
            group.save();
        }
    }

});

更新 ：上面的示例有很多缺陷，以下代码用于显示每个Lux解决方案的更正：

//controllers/groupPlanning.js

import Ember from 'ember';

export default Ember.Controller.extend({

    groups: Ember.computed('model.groups.[]', function(){
        return this.get('model.groups');
    }),

    enrollmentGroup: Ember.computed('groups', function(){
        return this.get('groups').findBy('name', 'Enrollment');
    }),

    enrollmentGroupPercent: Ember.computed('enrollmentGroup.year', 'someOtherNumber', function() {
        var group = this.get('enrollmentGroup');
        return group.year * this.get('someOtherNumber');
    }),

   ...

    actions: {
        setGroupYear: function(year){
            var group = this.get('enrollmentGroup');
            group.set('year', year);
            group.save();
        }
    }

});

除了询问这种方法是否合理之外，我在实际操作中设置enrollmentGroup的值时遇到了一个问题：

group.set('year', year);

哪个抛出和错误

Uncaught TypeError: Cannot read property 'set' of undefined

这里的任何指针将不胜感激。 谢谢！

Answer 1

首先，您对enrollmentGroupPercent的依赖缺少year 。 代替

enrollmentGroupPercent: Ember.computed('enrollmentGroup', function() {

采用

enrollmentGroupPercent: Ember.computed('enrollmentGroup.year', 'someOtherNumber', function() {

您肯定需要year因为您对其进行了修改。

---

第二，你的问题：

未捕获的TypeError：无法读取未定义的属性“ set”

看起来group为null / undefined ！ 也许用调试器检查一下！

因此， enrollmentGroup绝对不会返回任何内容。 也许您没有名为Enrollment组。 但是我认为您可能会遇到一些更棘手的问题。

我假设您的model是ember-data模型，并且将hasMany关系groups 。

这段代码没有任何意义：

groups: Ember.computed('model.@each.groups', function(){
    return this.get('model').get('groups');
}),

首先，我建议在将get设置为Ember.get之后get(this, 'model.groups') this.get('model.groups')或get(this, 'model.groups')替换this.get('model').get('groups') 。

然后在model上使用@each ，仅当model是数组时才有意义。

添加/删除组后，可能要重新计算CP。 在这种情况下，请使用model.groups.[]作为依赖项键。 如果要汇总组中的数据，例如计算总数，则可以使用model.groups.@each.quantity并且只要任何组上的数量发生变化，CP都会重新计算。

如果name可以更改，则实际上需要此name ，因为组列表不会仅更改名称，因此您可能稍后将名称设置为Enrollment吗？

现在您应该可以更换了

enrollmentGroup: Ember.computed('groups', function(){

与

enrollmentGroup: Ember.computed('groups.@each.name', function(){

但由于当前ember版本中存在错误 ，因此无法使用 ！

然后，重要的是要了解store方法和模型关系不会返回正常值，而是ArrayProxy ， ObjectProxy ， PromiseArray和PromiseObject 。

因此，实际上groups是PromiseObjects的PromiseArray。 但是您可以在groups CP中解开PromiseObjects：

groups: Ember.computed('model.groups.[]', function(){
    let promise = this.get('model.groups').then(groups => Ember.RSVP.all(groups));
    return DS.PromiseArray({promise});
}),

然后使用content来观察实际值：

enrollmentGroup: Ember.computed('groups.content.@each.name', function(){
    return this.get('groups').findBy('name', 'Enrollment');
}),

现在enrollmentGroup应该始终是最新的！ 因此，您唯一可能遇到的问题就是您要尽早采取行动！

如果仍然有问题，请在ember-twiddle上提供一个最小的示例！

Answer 2

您正在尝试设置计算属性的值，这种方法无法正常工作。 我建议观察者的方法 ：

enrollmentGroupObserver: Ember.observer('groups', function(){
        this.get('groups').forEach(function(group) {
            if (group.get('name') === 'Enrollment'){
                this.set('enrollmentGroup', group);
            }
        }):

    }),
enrollmentGroup: null,