how to observe changes in an array within controller/component

Question

How can we observe changes to an array in Ember? I have ember component that uses raw object data from a model, but to demonstrate the issue I am using array property within component itself like:

 init:function(){
            this._super();
            var arr = Ember.A([
                Ember.Object.create({"shelfNo": 1, "noOfItems": 2}),
                Ember.Object.create({"shelfNo": 2, "noOfItems": 3}),
                Ember.Object.create({"shelfNo": 3, "noOfItems": 2})]
            );
            this.set("someArray",arr);

            //DOES NOT WORK

            this.get('someArray').addArrayObserver(function () {
                Ember.ObjectController.create({
                    arrayWillChange: function (observedObj, start, removeCount, addCount) {
                        console.log("in arrayWillChange");
                    },
                    arrayDidChange: function (array, start, removeCount, addCount) {
                        console.log("in arrayDidChange");
                    }
                });
            });

        }

I also tried :

testObserver: function(){
            //DOES NOT WORK
            console.log("here");
        }.observes('someArray@each')

But both didn't work for me!

Here is a jsbin : http://jsbin.com/EkumOjA/1/

Thanks, Dee

Marcio Junior · Accepted Answer · 2013-12-09 18:53:12Z

6

If you are observing a property from some object in the array use [email protected]. To observe when the array content change (someArray.pushObject, removeObject etc) use someArray.[] or someArray.length.

Also, instead of override init use someFunc: function() {}.on('init') this is the safe way to get observers working, on object initialization.

This is your updated code:

App.ShowQuestionComponent = Ember.Component.extend({
    someArray : null,
    initializeSomeArray:function(){                
        var arr = Ember.A([
            Ember.Object.create({"shelfNo": 1, "noOfItems": 2}),
            Ember.Object.create({"shelfNo": 2, "noOfItems": 3}),
            Ember.Object.create({"shelfNo": 3, "noOfItems": 2})]
        );              

        this.set("someArray",arr);
    }.on('init'), 
    testObserver: function(){                
        console.log("here");
    }.observes('someArray.[]')

});

And your updated jsbin http://jsbin.com/EkumOjA/2/edit

answered Dec 9, 2013 at 18:53

Marcio Junior

19.1k4 gold badges47 silver badges47 bronze badges

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

2 Comments

Deewendra Shrestha Over a year ago

Thanks Marcio, I realized what I missed. I should have done .observes('someArray.@each') instead of .observes('someArray@each') - I missed ".". Without your jsbin I wouldn't be able to figure out my issue. Thanks.

Marcio Junior Over a year ago

You are welcome. Just to remember that if you want to observer the content change, just use someArray.[] because the someArray.@each is intended to observe properties in the array, it add listerners in each item so you gain performance just using someArray.[].

Collectives™ on Stack Overflow

how to observe changes in an array within controller/component

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest