EmberJS: how to use nested objects attributes in computed properties? - for-loop

Question

I have trouble understanding the proper way to call attributes of a child in a nested object model, and use them to compute a new property. Here is what I'm trying so far:
Monitor.ProcessController = Ember.ObjectController.extend({
nbUsers: function() {
var total = 0;
this.get('containers').then(function(containers) {
containers.forEach(function(container, index){
total += container.get('nbUsers');
});
});
return total;
}.property('containers.#each.nbUsers')
});
Monitor.ContainerController = Ember.ObjectController.extend();
Monitor.Process = DS.Model.extend({
containers: DS.hasMany('container', {async : true}),
name: DS.attr('string')
});
Monitor.Container = DS.Model.extend({
process: DS.belongsTo('process'),
name: DS.attr('string'),
nbUsers: DS.attr('integer')
});
// Test data
Monitor.Process.FIXTURES = [
{
id: 1,
name: 'Mumble',
containers: [1,2]
},
{
id: 2,
name: 'EVE',
containers: [3]
}
];
Monitor.Container.FIXTURES = [
{
id: 1,
name: 'First',
process: 1,
nbUsers: 1
},
{
id: 2,
name: 'Second',
process: 1,
nbUsers: 1
},
{
id: 3,
name: 'Unique',
process: 2,
nbUsers: 1
}
];
So a Process has multiple child Containers, and I would like to compute the number of total users for each process, based on the containers data, dynamically. Sounds trivial, is apparently not.
{{nbUsers}} keeps returning "0".
Any pointers on what I'm doing wrong?

Answer 1

You're property is asynchronous, so you return 0 before you ever update total, and since it's not a reference being passed back, it's not like it will update the value that's already been returned. So the property total gets updated, but not the value that was returned to the computed property.
The easiest way to change it, is to make it an observer, and have it update the property.
Monitor.ProcessController = Ember.ObjectController.extend({
nbUsers: 0,
nbUsersWatcher: function() {
var self = this;
this.get('containers').then(function(containers) {
var total = 0;
containers.forEach(function(container, index){
total += container.get('nbUsers');
});
self.set('nbUsers', total);
});
}.observes('containers.#each.nbUsers')
});
You might be able to use a computed as well, but I'd have to test that before I tell you that's possible.