Question

I have a schema structured something like this:

App = {};

App.Outer = Ember.Object.extend({
    inner: null,
    quantity: 0,

    count: function () {
        var self = this, inner = self.get('inner');
        return self.get('quantity') * inner.get('count');
    }.property('nothing')
});

App.Inner = Ember.Object.extend({
    count: 0
});

Yes, the ‘count’ computed property really is set to depend on a totally nonexistent property ‘nothing’. However it seems to get updated anyway:

var o1 = App.Outer.create({
    quantity: 2,
    inner: App.Inner.create({count: 4})
});

console.log(o1.get('count')); // => 8
o1.get('inner').set('count', 5);
console.log(o1.get('count')); // => 10
o1.set('inner', App.Inner.create({count: 10}));
console.log(o1.get('count')); // => 20

Am I missing something? It knows what to update without me telling it what to depend on… can’t be right, can it? What am I misunderstanding about Ember computed properties?

Thanks

Answer 1

By using this.get('quantity'), inner.get('count') you are telling it what it depends on. Every time you call .get('count') the function will go off and get the current values for those properties and therefore return the up to date result.

The .property() part comes into play when you bind the computed property count to something else e.g. a view. When you do that then making a change to quantity will automatically recalculate the count, and this new value will be propagated to whatever you have bound the count too.

You can see the difference in action here: http://jsfiddle.net/tomwhatmore/6gz8x/