如何观察对象数组中的更改

时间:2015-05-06 14:06:07

标签: javascript arrays object observers

Javascript现在实现了Object.observe和Array.observe,但是我似乎找不到合并功能的方法。

我要做的是拥有一个对象数组。当其中一个对象的任何属性发生变化时,我希望收到通知。

Object.observe允许我在特定对象的属性发生更改时收到通知。

Array.observe允许我在发生阵列级别更改时收到通知。

除非我特意观察数组的每个元素,否则我无法知道特定元素属性何时发生变化。

例如:

var model = [
  {
    data: 'Buy some Milk',
    completed: false
  },
  {
    data: 'Eat some Food',
    completed: false
  },
  {
    data: 'Sleep in a Bed',
    completed: false
  },
  {
    data: 'Make Love not War',
    completed: false
  }
];

Array.observe(model, function(changeRecords) {
  console.log('Array observe', changeRecords);
});

model[0].data = 'Teach Me to code';
model[1].completed = true;
model.splice(1,1);
model.push({data: "It's a new one!",completed: true});

给出一个控制台输出:

Array observe [Object, Object]
  0: Object
    addedCount: 0
    index: 1
    object: Array[4]
    removed: Array[1]
    type: "splice"
    __proto__: Object
  1: Object
    addedCount: 1
    index: 3
    object: Array[4]
    removed: Array[0]
    type: "splice"
    __proto__: Object
length: 2
__proto__: Array[0]

这两个通知专门针对:

model.splice(1,1);

model.push({data: "It's a new one!",completed: true});

但完全忽略

model[0].data = 'Teach Me to code';

model[1].completed = true;

是否可以观察每个更改,无论是数组级别还是对象级别更改?

我知道有些库可以为我做这些,但我想了解如何直接在我自己的代码中实现它。

编辑:好的,所以我似乎没有错过任何魔术功能,唯一真正的选择是观察阵列的各个元素。

因此,为了扩展原始问题,调整数组以处理元素观察的最有效方法是什么?

1 个答案:

答案 0 :(得分:1)

Array observe观察数组更改!您还需要使用Object.Observe!

观察Array中的每个对象

见这个

      function ObserveMyArray(myArray){
       var arr=myArray||[];
          for(var i=0;i<arr.length;i++){
            var item=arr[i];

        Object.observe(item , function(changes){

          changes.forEach(function(change) {
               console.log(change.type, change.name, change.oldValue);
           });

          });
         } 
       Array.observe(arr, function(changeRecords) {
         console.log('Array observe', changeRecords);
       });
        }