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

【问题标题】：How to provide real-time binding behavior in Aurelia?如何在 Aurelia 中提供实时绑定行为？
【发布时间】：2016-05-23 09:35:00
【问题描述】：

我有一个带有按钮和事件处理程序的视图，它调用 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);
}

【问题讨论】：

据我所知 doSomeWork(() => this.loading = false && doSomeWork()=> { .... doSomeWork()=> { .... doing ...}));在第二个 doSomeWork 中，你想假为真。假不能这样是真的。 Aurelia 一切顺利

【解决方案1】：

这可能是因为 Aurelia 绑定使用比 DOM 慢的微任务。与其在代码中操作 DOM，不如检查“正在加载”属性的状态。

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

【讨论】：