Ember.js binding to computed property in Ember.Object from controller doesn't work

Question

For a while now I'm working with Ember js and so far I like it. Unfortunately I'm running into a problem.

I'm trying to display and update a property in a controller based on a property in an Ember object.

A link to a jsbin is below

jsbin

The object represents an item with two values and a count for each of those values. When the count for a property is changed a new total (countA * valueA + countB * valueB) for the item is calculated. I do this for 4 items in the example.

Whenever the count on any of them changes I also want to change a total for the 4 items. I do this by defining a property in the controller. The property seems to display on initial load but doesn't update when the count is updated.

I figured binding the value to the Ember Object would do the trick but I can't seem to get it working.

Any help would be greatly appreciated.

Answer 1

You're currently binding the totalBoth variable to the class definition and not an instance of a class, which just wont work. What you want to do is observe for changes in any of the instances.

Check out this updated JSBin: http://jsbin.com/cuqitufo/6/edit

The trick is to use the @each property for aggregate data.

So you no longer need the binding, you just observe the calculatedTotal of each instance: App.TypeNumbers.@each.calculatedTotal:

totalBoth   : function(){
  var total = 0;
  App.TypeNumbers.forEach(function(item){
    console.log( item.get('calculatedTotal') );
    total += item.get('calculatedTotal');
  });
  return total;
}.property( 'App.TypeNumbers.@each.calculatedTotal' ),