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?

The key is telling Ember what property to watch. If you want to watch the name, it would be '[email protected]'. jsbin.com/lehajeta/1/edit Just adding this on here in case it helps. Not trying to steal kingpin2k's thunder. :) — Matthew Blancarte
– Matthew Blancarte, Commented Jul 22, 2014 at 16:45
@MatthewBlancarte, what if I want to watch for any property change and not just 'name'? — Johnny Oshika
– Johnny Oshika, Commented Jul 22, 2014 at 17:28
Do you mind if I ask why you would do that? I am having trouble imagining a reason, even in the abstract. When you write a computed property callback, you are going to specify one or more properties to be used in the return value. Set those to be watched... If you end up with a list of five properties, you will at least be able to clearly see what is dynamically bound. — Matthew Blancarte
– Matthew Blancarte, Commented Jul 22, 2014 at 17:41
In terms of "why" it doesn't automatically watch for any and all property changes? I am guessing that it's for performance reasons. If you have a collection of 1000 models and you have a bunch of computed properties bound to every potential model property... CPU and memory wouldn't be happy. — Matthew Blancarte
– Matthew Blancarte, Commented Jul 22, 2014 at 17:43
My reason for this is I added a custom isDirty property on App.ArrayProxy. In it, I do a deep comparison to check if the array is dirty. I'm doing this to get around the fact that Ember Data doesn't support composite keys, so I've created a raw transform (similar to this technique: stackoverflow.com/a/20645282/188740). Because of this, I need to know when my array is dirty. — Johnny Oshika
– Johnny Oshika, Commented Jul 22, 2014 at 20:05

Kingpin2k · Accepted Answer · 2014-07-22 17:13:26Z

6

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

edited Jul 22, 2014 at 17:13

answered Jul 22, 2014 at 16:40

Kingpin2k

47.4k10 gold badges80 silver badges97 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

Johnny Oshika Over a year ago

What if I want to watch for any property change, and not specify a particular property name? My understanding was that .property('content.@each') should do that.

Kingpin2k Over a year ago

no, unfortunately there is no built in mechanism for watching if any property changes on an object. You can dump them all into a single computed property and watch it if you needed that functionality.

Johnny Oshika Over a year ago

Thanks @kingpin2K. I was lead in the wrong direction when I saw this question: stackoverflow.com/q/22388402/188740. The person asking that question somehow was able to observe any property of an array of objects, but it doesn't seems like it should have.

Kingpin2k Over a year ago

It looks like he converted his object into an array of property values (or key value pairs) and observed that. That seems a little wonky to me, but it could be done.

Johnny Oshika Over a year ago

Can it really be done? He's not observing a specific property, but rather the whole array itself --> observes("array.@each"). If that works for him, then shouldn't we be able to observe any property change as well?

|

Collectives™ on Stack Overflow

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

1 Answer 1

8 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

8 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related