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

Question

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

当我使用Aurelia绑定

时

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

并设置

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

按钮仍然启用了一段时间，用户可以再次单击此按钮。

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

为具有双向绑定的按钮创建参考

<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慢。您应该检查“loading”属性的状态，而不是操纵代码中的DOM。

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