javascript - 当子组件更改 "field.property"时，未调用 fieldChanged() 方法

Question

这是我的父 View 模型和 View 。

export class Parent {
  @observable field;

  fieldChanged() {
    console.log('field has been changed');
  }
}

<template>
  <child-component field.two-way="field" />
</template>

当我这样做的时候

this.field.property = 'new value';

在子组件中，不调用fieldChanged方法。

请注意，字段是对象的类型。对于原始类型，它工作得很好。我可以做些什么来使其适用于对象类型吗？

Answer 1

如果你想观察一个对象的属性，你可以使用 bindingEngine :

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

@inject(BindingEngine)
export class Parent {
  field = {
    property: ''
  }

  constructor(bindingEngine) {
    this.bindingEngine = bindingEngine;
  }

  attached() {
    this.subscription = this.bindingEngine.propertyObserver(this.field, 'property')
      .subscribe((newValue, oldValue) => {
      // do your logic here
    })
  }

  detached() {
    // Dispose subscription to avoid memory leak
    this.subscription.dispose();
  }
}