如何在 Aurelia 中提供实时绑定行为？

Question

我有一个视图，其中包含按钮和事件处理程序，单击按钮会调用 API 并重定向到另一个视图。我想在触发事件点击时禁用此按钮。

当我使用 Aurelia 绑定时

<button disabled.bind="loading" type="button" click.delegate="click()">Push</button>

并设置

click() {
   this.loading = true;
   doSomeWork(() => this.loading = false);
}

按钮在一段时间内仍处于启用状态，用户可以再次单击此按钮。

我使用了一些看起来不太好的解决方法。

为具有双向绑定的按钮制作 ref

<button ref="button" disabled.two-way="loading" type="button" click.delegate="click()">Push</button>

然后我明确地为按钮设置了禁用。

click() {
   this.button.disabled = true;
   doSomeWork(() => this.loading = false);
}

Answer 1

这可能是因为 Aurelia 绑定使用微任务，它比 DOM 慢。与其在代码中操纵 DOM，不如检查 'loading' 属性的状态。

click() {
   if (this.loading) { return; }
   this.loading = true;
   doSomeWork(() => this.loading = false);
}

How to provide real-time binding behavior in Aurelia?