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(...)).
更多推荐
@bindable changeHandler在绑定完成更新之前触发
发布评论