@bindable在绑定完成更新之前触发

Question

“守则”：

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>

widget-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.
  }
}

widget-picker.html

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

问题是：

@bindable的changeHandler在绑定更新到App.js及其this.shipment.widget之前触发widgetChanged事件。

因此，当事件聚合器消息发出时，前面的值仍然设置在“the .shipment.widget”上。

问题：

是否有一种方法可以让@bindable**'s changeHandler等待，直到为@bindable更新的所有绑定都完成？**

或者我还能再用一次回调吗？也许是过去式( changedHandler )？

我确实尝试将change.delegate="widgetChanged"添加到select中，希望delegate选项会使其更慢，但在更新完全推出之前它仍然会触发。

Answer 1

您可以将需要完成的工作推送到微任务队列中：

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

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

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

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

这将确保它发生在事件循环的同一“转折”期间(而不是执行类似setTimeout(...)的操作)。