Ember.js: Observing array property using @each doesn't work

Question

My understanding is that observing for '@each' means that I'm observing any change to any property in an array, but it doesn't seem to work. For example:

App.ArrayProxy = Ember.ArrayProxy.extend({

  i: 0,

  foo: function(){

    console.log('foo called');

    return ++this.i;

  }.property('content.@each')

});

I've also tried .property('@each') instead of .property('content.@each') with equally disappointing results.

Here is a jsbin that demonstrates: http://jsbin.com/hagar/5/edit

In the demo, changing the array list itself (by clicking the 'Remove Last' button) triggers a refresh of the 'foo' computed property, but changing a property of an object in the array doesn't.

Any way around this problem?

Answer 1

You need to use a setter (or the built in incrementProperty), I added name if you care when the name was changed.

  foo: function(){
    console.log('foo called');
    return this.incrementProperty('i');
  }.property('[email protected]')

If you don't care about it incrementing when name changes you would use foo.[] which would only show when the array items are added/removed.

  foo: function(){
    console.log('foo called');
    return this.incrementProperty('i');
  }.property('content.[]')

http://jsbin.com/bakoqawi/1/edit