javascript - 如何观察 Controller /组件中数组的变化

Question

我们如何观察 Ember 中数组的变化？我有使用来自模型的原始对象数据的 ember 组件，但为了演示我在组件本身内使用数组属性的问题，例如:

 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");
                    }
                });
            });

        }

我也试过:

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

但两者都不适合我!

这是一个 jsbin:http://jsbin.com/EkumOjA/1/

谢谢，迪伊

Answer 1

如果您正在观察数组中某个对象的属性，请使用 someArray.@each.someProperty。要观察数组内容何时更改(someArray.pushObject、removeObject 等)，请使用 someArray.[] 或 someArray.length。

此外，不要覆盖 init，而是使用 someFunc: function() {}.on('init') 这是让观察者在对象上工作的安全方法初始化。

这是您更新后的代码:

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.[]')

});

还有你更新的jsbin http://jsbin.com/EkumOjA/2/edit