2016-08-08 30 views
0

Einfache Situation. Ich habe Formulare mit Textboxen, die an Observable gebunden sind. Observables hat Abonnements, um etwas Logik zu machen (Servervalidierung, was auch immer, nur ein Ajax-Aufruf).KnockoutJs - Wie "Abonnements" zu synchronisieren und Ereignis klicken?

Es gibt auch eine Schaltfläche auf dem Formular mit einigen "Daten speichern" Logik. Daten sollten nur gespeichert werden, wenn alle Rückrufe beendet sind.

Abonnements werden ausgelöst, wenn sich der Wert ändert, meistens beim Fokusverlust, nicht nur bei jeder Änderung.

Jetzt können Sie einfach alles in Textfeld eingeben und dann sofort auf Speichern klicken. Was geschieht? Click-Ereignis wird aufgerufen, und Daten werden gespeichert. Es ist jedoch manchmal schneller als das Abonnement-Ereignis ausgelöst wird und der Server Daten zurückgibt.

Wie "synchronisieren" klicken Sie auf "fertig" Versprechen von Abonnements? Ich muss verhindern, dass Daten gespeichert werden, bevor alles erledigt ist. Es besteht jedoch keine Beziehung zwischen der Subskription von Textbox-Wert und der Schaltfläche. Alles ist asynchron, daher kann ich im Click-Event nicht einfach "Warten auf Funktion" aufrufen. Ein anderes Problem sollte sein, dass die Subskription später ausgelöst wird und dann click-Ereignis.

Irgendeine Lösung dafür?

Antwort

1

eine Variable Fügen Sie den Button Zustand zu verwalten -

<button data-bind="disable: serverSideCheckInProgress">Save Data</button> 

Innerhalb Ihrer Ajax-Aufruf -

//declare serverSideCheckInProgress false on init 

saveData = function(){ 
    serverSideCheckInProgress(true); 
    $.ajax({ 
    url: "test.html", 
    context: document.body 
    }).done(function() { 
    serverSideCheckInProgress(false); 
    }); 
} 
+0

bereits getan hat, aber Zeichnung von Textbox beobachtbaren Brände geklickt später dann Taste. Es gibt eine gewisse Verzögerung. So Schaltfläche ist aktiviert, Benutzer klickt und dann knockout feuert Textfeld Sonnenbeschrieb als Fokus verloren und Wert hat sich geändert. Es ist seltsam, aber so funktioniert es in diesem Fall. – Raptor