Код:

App.js

export class App {
  constructor() {
    this.widgets = [{ name: 'zero'}, {name: 'one'}, {name:'two'}];
    this.shipment = { widget: this.widgets[1] };
  }
}

App.html

<template>
  <require from="./widget-picker"></require>
  <require from="./some-other-component"></require>

  <widget-picker widget.bind="shipment.widget" widgets.bind="widgets"></widget-picker>
  <some-other-component widget.bind="shipment.widget"/>
</template>

виджет-picker.js

import {bindable, bindingMode} from 'aurelia-framework';

export class WidgetPicker {
  @bindable({ defaultBindingMode: bindingMode.twoWay, changeHandler: 'widgetChanged'  }) 
  widget;

  @bindable widgets;

  widgetChanged(widget) {
      // Use an Event Aggregator to send a message to SomeOtherComponent
      // to say that they should check their widget binding for updates.
  }
}

виджет-picker.html

<select value.bind="widget">
  <option repeat.for="widget of widgets" model.bind="widget">${widget.name}</option>
</select>

Эта проблема:

@bindablechangeHandler запускает событие widgetChanged до того, как привязка будет обновлена ​​доApp.js И егоthis.shipment.widget.

Поэтому, когда сообщение Event Aggregator выходит, предыдущее значение все еще устанавливается в this.shipment.widget.

Вопрос:

Есть ли способ сделать@bindablechangeHandler ждать, пока не будут выполнены все привязки, которые будут обновлены для @bindable?

Или я могу использовать другой обратный вызов? Может быть, измененный Хэндлер (прошедшее время)?

Я пытался добавитьchange.delegate="widgetChanged" кselectв надежде, чтоdelegate Параметр замедляет работу, но все равно срабатывает до того, как обновление будет полностью развернуто.