javascript - Aurelia bindingEngine.propertyObserver - 检测属性何时因对象更改而更改

Question

我们正在使用类似的代码来检测对特定对象属性的更改。

import {BindingEngine} from 'aurelia-framework';

class MyViewModel {
    static inject = [BindingEngine];

    constructor(bindingEngine) {
        this.bindingEngine = bindingEngine;
        this.myObject = {observeMe : 'Test' + new Date()};
    }

    attached() {
        this.subscription = this.bindingEngine
            .propertyObserver(this.myObject, 'observeMe')
            .subscribe((newValue, oldValue) => { 
                this.objectValueChanged(newValue, oldValue) 
            });

        setInterval(() => {
            this.myObject.observeMe = 'Test' + new Date();
        }, 2000);
    }

    detached() {
        this.subscription.dispose();
    }

    objectValueChanged(newValue, oldValue) {
        console.log(`observeMe value changed from: ${oldValue} to:${newValue}`);
    }
}

https://discourse.aurelia.io/t/how-to-observe-objects-in-aurelia-using-the-binding-engine/23

上面的例子工作正常，当 this.myObject 上的属性 observeMe 改变时，objectValueChanged 被触发。然而，由于某些情况，我们有时希望替换整个对象但仍会触发事件。示例:

setInterval(() => {
    this.myObject = { observeMe : 'Test' + new Date()}
    //Object.assign does not work either
    //this.myObject = Object.assign({ observeMe : 'Test' + new Date()}, this.myObject);
}, 2000);

这不会触发 objectValueChanged。如果我们需要捕获两个属性更改或整个对象都发生更改，我们可以做些什么呢？

现在我们已经通过不创建新对象而是像这样替换值来解决它。然而，如果我们能够跟踪对象也发生了变化，那对我们来说会容易得多。

Object.keys(this.myObject).forEach((key) => {
    this.myObject[key] = newMyObject[key];
});

Answer 1

您可以在 BindingEngine 上使用 expressionObserver 来观察具有许多访问器的长路径。此处的沙箱示例:https://codesandbox.io/s/x3qz6w2k6w

基本上绑定(bind)引擎提供了一个快捷方式来执行它，如下所示:

bindingEngine.createObserverFor(someObject, 'at.this.property.path');

该值将是路径中最终属性的值，默认情况下它会防止 null/undefined 所以你会得到 undefined 如果路径上的任何属性访问返回 null/undefined