Javascript 如何观察控制器/组件内阵列的变化

我们如何观察余烬中数组的变化？我有一个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：

谢谢，

---

Dee

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

另外，使用someFunc:function{}代替override init。在'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.[]')

});

---

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

另外，使用someFunc:function{}代替override init。在'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

谢谢Marcio，我意识到我错过了什么。我应该这样做。观察'someArray.@each'而不是.observes'someArray@each“-我错过了。。没有你的jsbin，我就无法解决我的问题。谢谢，不客气。请记住，如果您想观察内容更改，只需使用someArray。[]，因为someArray。@每个用于观察数组中的属性，它在每个项目中添加侦听器，这样您就可以使用someArray获得性能。[]。谢谢Marcio，我意识到我错过了什么。我应该这样做。观察'someArray.@each'而不是.observes'someArray@each“-我错过了。。没有你的jsbin，我就无法解决我的问题。谢谢，不客气。请记住，如果要观察内容更改，只需使用someArray。[]，因为someArray。@每个用于观察数组中的属性，它会在每个项目中添加侦听器，这样您就可以使用someArray获得性能。[]。