I'm new to Ember and trying to follow the Data Down Action Up approach with my controller acting as the main parent 'component' with a number of components sending actions up to the controller to set values on models that will eventually trickle back down new value to the components. I know controllers are going away but I need this controller to hold all the state if you will...
I'm struggling with my approach in that I want to set a number of computed properties on my controller that watch model properties. Most difficult seemingly is setting the value of one of these computed properties that needs to set some other property when an action fires. Here is some of my controller:
//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.name === 'Enrollment'){
return group;
}
}):
}),
enrollmentGroupPercent: Ember.computed('enrollmentGroup', 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();
}
}
});
Aside from asking if this approach seems reasonable, I'm having a problem actually setting the value of enrollmentGroup in my action:
group.set('year', year);
which throws and error of
Uncaught TypeError: Cannot read property 'set' of undefined
Any pointers here would be appreciated. Thanks!
