Question

这是我的父视图模型和视图。

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();
  }
}

Answer 2

您可以使用BindingEngine.expressionObserver方法而不是单个属性来观察路径

const observer = bindingEngine
  .expressionObserver(this /* or any object */, 'field.property')
  .subscribe(newValue => console.log('new field.property is:', newValue))

请记住，以后不再需要时致电observer.dispose()。

Answer 3

您可能没有在子组件中声明绑定：

import {bindable} from 'aurelia-framework';

export class ChildComponent
{
    @bindable field;

   /* DO whatever you want*/
}

顺便说一句：在您的代码中，您应该使用this.field = 'new value';而不是field = 'new value';

从子组件更改“ field.property”时未调用fieldChanged（）方法

3 个答案: