@bindable changeHandler在绑定完成更新之前触发 [英] @bindable changeHandler fires before bindings are done updating

问题描述

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在绑定完成更新之前触发的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！