Wie kann man Echtzeit-Bindungsverhalten in Aurelia bereitstellen?

Question

Ich habe eine Ansicht mit Button und Event-Handler auf Knopfdruck, der API aufruft und zu einer anderen Ansicht umleitet. Ich möchte diese Schaltfläche deaktivieren, wenn ein Ereignisklick ausgelöst wird.

Wenn ich Aurelia Bindung verwenden

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

und setzen

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

Taste noch einige Zeit aktiviert ist und ein Benutzer auf diese Schaltfläche erneut klicken konnte.

Ich habe eine kleine Abhilfe verwendet, die nicht sehr gut aussieht.

Fabrikat ref für Button mit Zwei-Wege-Bindung

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

Dann explizit deaktivieren ich für Schaltfläche.

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

Answer 1

Das liegt wahrscheinlich daran, dass die Aurelia-Bindung Mikroaufgaben verwendet, die langsamer sind als das DOM. Anstatt das DOM in Ihrem Code zu manipulieren, sollten Sie den Status Ihrer 'loading'-Eigenschaft überprüfen.