Wie auf einem Wert, der eine Abhängigkeit zu Setup von einem Server in Knockout kommenden

Question

Alle,

HINWEIS (mein Setup):

Knockout JS lib

Knockout-Mapping lib (mein Ansicht-Modell Verwendung von Knockout-Mapping js lib)

ich habe ein Benutzer eine Rechnung Form und jedes Mal ändert, wird auf dem Server erzeugt und zu beobachtbaren VM umgewandelt einer der folgenden Werte:

Menge, Einzelpreis

Ich möchte auf den Server gehen, um die Gesamtsteuer zu berechnen und diese Steuer in einer Spanne zu rendern.

Ich bin auf der Suche nach Code in Knockout, die den berechneten Gesamtsteuerwert vom Server zurückgegeben asynchron zurückgibt und es enthält Abhängigkeit Kette auf Menge und Stückpreis. Die Schwierigkeit hierbei besteht darin, dass die Serveraufrufe asynchron sind und wie ich eine Aktualisierung in Knockout auslösen kann.

UPDATE:

ich unten an der Lösung zurückgegriffen, schlagen Sie bitte, ob es eine bessere Antwort. Nur zu dieser Lösung Nachteil ist, wenn das Formular für alle Steuerelemente, die onchange-Ereignis ausgelöst wird Databound ist, der dieses Ereignis haben Bindung (so dass einmal ist pro Position):

<input data-bind="value: Quantity, event:{ change: calculateTax()}" /> 

<td data-bind="text: renderCurrency(tax())"></td> 


vm.tax = ko.observable(0); 

function calculateTax() { 
    var document = ko.mapping.toJS(vm).Document; 
    var json = JSON.stringify(document); 
    svc.GetTax(json, 
     function(results, ctx, methodName) { 
      var mny = results; 
      vm.tax(mny.Amount); 
     } 
    ); 
} 

Answer 1

in dieser Art von Fällen habe ich verwendet, was ich ein asyncComputed nenne. Dadurch kann der Steuerwert von einer oder mehreren Observablen (Menge, Stückpreis) abhängen und aktualisiert werden, sobald ein Ergebnis vom Server zurückgegeben wird. Hier ist eine mögliche Implementierung:

ko.asyncComputed = function (fn, defaultValue) { 
    var value = ko.observable defaultValue 

    var result = ko.computed(() => value()) 

    result.loading = ko.observable(true) 

    ko.computed(function() { 
    result.loading(true) 

    Promise.resolve(fn()).then(function (asyncResult) { 
     result.loading(false) 
     value(asyncResult) 
    } 
    } 

    return result 
} 

Beachten Sie, dass die fn Parameter erwartet wird, eine Funktion zu sein, ein Versprechen der Rückkehr, das ist, was zum Beispiel jQuery Ajax bereits der Fall ist.

die svc.GetTax Unter der Annahme gibt ein Versprechen, das ist, wie es in Ihrem Fall zutreffen:

vm.tax = ko.asyncComputed(function() { 
    var document = ko.mapping.toJS(vm).Document; 
    var json = JSON.stringify(document); 
    return svc.GetTax(json).then((results) => results.Amount); 
} 

Answer 2

Sie die subscribe im observable verwenden können, ist ein PubSub Muster im KO umgesetzt, more info Siehe das Beispiel:

function ViewModel(){ 
 
    this.Quantity =ko.observable(); 
 
    this.tax = ko.observable(); 
 
    
 
    this.Quantity.subscribe(function(){ 
 
     this.calculeTax(); 
 
    },this); 
 
}; 
 

 
ViewModel.prototype.calculeTax = function(){ 
 
    //Here you will do the ajax call 
 
    this.tax(this.Quantity()*10); 
 
}; 
 

 
ko.applyBindings(new ViewModel());

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script> 
 

 
<input data-bind="value: Quantity" /> 
 
<br/> 
 

 
<span>If you want to update on keydown use the textInput bind handler:<span> 
 
    <br/> 
 
<input data-bind="textInput: Quantity" /> 
 
<br/> 
 
<br/> 
 

 
<span data-bind="text: tax"></span>