时间戳

首页 > 解决方案 > Aurelia bindingEngine.propertyObserver - 检测何时因对象更改而更改属性

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

问题描述

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

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

上面的示例工作正常，并在属性on更改objectValueChanged时触发。然而，由于某些情况，我们有时希望替换整个对象但仍会触发一个事件。例子：observeMethis.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];
});

标签： javascripttypescriptaurelia

解决方案

您可以使用expressionObserveronBindingEngine观察具有许多访问器的长路径。这里的沙盒示例：https ://codesandbox.io/s/x3qz6w2k6w

基本上绑定引擎提供了一个快捷方式，如下所示：

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

该值将是路径中最终属性的值，并且默认情况下它会受到null/的保护，因此如果路径上的任何属性访问返回/undefinedundefinednullundefined

推荐阅读