如何观察对象数组的变化
How to Observe changes in an array of objects
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;
有没有办法观察每一个变化,无论是数组级别还是对象级别的变化?
我知道有些库可以为我做这件事,但我想了解如何在我自己的代码中直接实现它。
编辑:好的,看来我没有遗漏任何神奇的功能,唯一正确的选择是观察数组的各个元素。
因此,为了扩展原始问题,调整数组以处理元素观察的最有效方法是什么?
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);
});
}
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;
有没有办法观察每一个变化,无论是数组级别还是对象级别的变化?
我知道有些库可以为我做这件事,但我想了解如何在我自己的代码中直接实现它。
编辑:好的,看来我没有遗漏任何神奇的功能,唯一正确的选择是观察数组的各个元素。
因此,为了扩展原始问题,调整数组以处理元素观察的最有效方法是什么?
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);
});
}