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

Приведенный выше пример работает нормально, и objectValueChanged срабатывает при изменении свойства observeMe в this.myObject. Однако из-за некоторых обстоятельств мы иногда хотели бы заменить весь объект, но при этом вызывать событие. Пример:

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

Вы можете использовать expressionObserver на BindingEngine, чтобы наблюдать длинный путь со многими аксессорами. Пример песочницы здесь: https://codesandbox.io/s/x3qz6w2k6w

В основном связывающий движок дает ярлык, который выглядит следующим образом:

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

Значением будет значение конечного свойства в пути, и оно по умолчанию защищено от null / undefined, поэтому вы получите undefined, если какое-либо из свойств доступа по пути вернет null / undefined