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

本文介绍了@bindable changeHandler在绑定完成更新之前触发的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述

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事件/ code>。

The Problem:

The @bindable's changeHandler fires the widgetChanged event before the binding gets updated to App.js and its this.shipment.widget.

因此，当Event Aggregator消息消失时，仍然会在`this.shipment.widget'上设置之前的值。

So when the Event Aggregator message goes out, the previous value is still set on `this.shipment.widget'.

有没有办法让 @bindable 的changeHandler等到所有为@bindable更新的绑定都完成了吗？

Is there a way to make @bindable's changeHandler wait until all the bindings that will be updated for @bindable are done?

或者我可以使用另一个回调吗？也许是一个已经改变过的玩家（过去时）？

Or is there another callback I can use? Maybe a changedHandler (past tense)?

我确实尝试将 change.delegate =widgetChanged添加到选择，希望委托选项会使速度变慢，但在完全推出更新之前它仍然会触发。

I did try to add change.delegate="widgetChanged" to the select, hoping that the delegate option would make it slower, but it still fires before the update is fully rolled out.

推荐答案

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

You could push the work you need to do onto the micro task queue:

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（...）相反）。

This will ensure it occurs during the same "turn" of the event loop (as opposed to doing something like setTimeout(...)).