Aurelia 自定义绑定行为以观察对象的所有属性答案

【问题标题】：Aurelia custom Binding Behavior to observe ALL properties of an objectAurelia 自定义绑定行为以观察对象的所有属性
【发布时间】：2018-11-04 22:15:39
【问题描述】：

我想创建一个自定义绑定行为，允许我检测对象属性的任何更改，如下所示：

<my-form model.bind="myObject & objectObserver:myObjChanged()"></my-form>

我知道我可以使用 Aurelia 的绑定引擎来创建一个属性观察器，也许我可以将它构建到一个自定义的绑定行为中来检测对象的属性并为每个属性创建属性观察器。但我无法理解自定义绑定行为中提供给我的绑定对象。到目前为止，这是我的代码：

import { inject, bindingBehavior, BindingEngine } from 'aurelia-framework';

@bindingBehavior('objectObserver')
@inject(BindingEngine)
export default class ObjectObserverBindingBehavior {
  constructor(bindingEngine) {
    this.bindingEngine = bindingEngine;
  }

  bind(binding, scope, interceptor) {
    console.warn('hello', binding, scope, interceptor);
  }

  unbind(binding, scope) {
    console.warn('observer.unbind()', binding, scope);
  }
}

当绑定发生并输出控制台文本时，我看到了

所以我知道它正在工作，但我不知道什么是开始观看的最佳对象。我在 targetObserver.currentValue 中看到了绑定对象。那是开始观看的最佳属性吗？是否有其他方法可以利用 Aurelia 绑定引擎的现有功能？

【问题讨论】：

This question 可能有用吗？

标签： aurelia

【解决方案1】：

我找到了一个不是 Aurelia 特定的解决方案，它基于 JavaScript 中内置的 Proxy 功能。

export function onChangeObj(object, onChange) {
  // creates Proxy to detect changes in object properties and call a function
  if (typeof onChange !== 'function' || typeof object !== 'object') {
    throw new Error('onChangeObj: incorrect parameters');
  }
  const handler = {
    set(obj, prop, value) {
      onChange(prop, value);
      return Reflect.set(obj, prop, value);
    },
  };
  return new Proxy(object, handler);
}

为了使用它，只需像这样调用它：

this.myObject = onChangeObj(this.myObject, () => this.myObjChanged());

实际上，该对象被一个包装代理替换，该包装代理在每次修改其中一个属性时调用提供的函数（使用设置器）。

如果有人通过 Aurelia Binding Behavior 找到解决方案，我仍然会感兴趣。

【讨论】：