Perché il mio calcolo knockout non è funzionante?

Question

Non riesco ad avere un valore calcolato di questo funzionamento. Qualsiasi input sarebbe apprezzato.

ottengo i valori per i miei prezzi dal server.

var pModel = function() { 
 
    var self = this; 
 
    self.prices = ko.observable({ "ID": 1,"Price1": 12,"Price2": 12}); 
 

 
    self.Total = ko.computed(function() { 
 
     var total = 0; 
 
     total = self.prices().Price1 + self.prices().Price2; 
 
     return total; 
 
    }); 
 
}; 
 
var VModel = new pModel(); 
 
ko.applyBindings(VModel);

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/2.1.0/knockout-min.js"></script> 
 
<form action='/someServerSideHandler'> 
 
    <table> 
 
     <thead> 
 
      <tr>Prices</tr> 
 
     </thead> 
 
     <tbody id="calc"> 
 
      <tr> 
 
       <td>Price 1</td> 
 
       <td> 
 
        <input data-bind='value: prices().Price1' /> 
 
       </td> 
 
      </tr> 
 
      <tr> 
 
       <td>price 2</td> 
 
       <td> 
 
        <input data-bind='value: prices().Price2' /> 
 
       </td> 
 
      </tr> 
 
      <td>TOTAL</td> 
 
      <td> <span data-bind="text: $root.Total"></span> 
 
      </td> 
 
     </tbody> 
 
    </table> 
 
</form>

Answer 1

La variabile prices è osservabile, ma i suoi membri non lo sono. Ridefinire in questo modo:

self.prices = ko.observable({ 
    ID: ko.observable(1), 
    Price1: ko.observable(12), 
    Price2: ko.observable(12) 
}); 

Ora, questo quasi opere, ma se si modificano i valori, sarà convertirli in stringhe, in modo che il totale di 18 e 12 sarà 1812! Dovremo trasformare quelle stringhe in numeri.

self.Total = ko.computed(function() { 
    var price1 = parseFloat(self.prices().Price1()); 
    var price2 = parseFloat(self.prices().Price2()); 
    return price1 + price2; 
}); 

Si dovrebbe essere tutto pronto!

Answer 2

le cose contrastanti su un po ': ogni valore che le altre parti del modello di vista dovrebbe essere in grado di reagire in caso di modifiche deve essere un osservabile. Nel tuo caso, hai un oggetto "prezzi" che è osservabile ma le proprietà di questo oggetto (come "Prezzo1" e "Prezzo2") non sono osservabili. Ciò significa che il tuo osservabile calcolato verrà aggiornato solo se l'intero oggetto inserito in "prezzi" verrà sostituito da un nuovo valore.

Quindi, solo perché questi valori obserable:

var pModel = function() { 
    var self = this; 

    self.prices = { 
     "ID": 1, // IDs normally do not change so no observable required here 
     "Price1": ko.observable(12), 
     "Price2": ko.observable(12) 
    }; 

    self.Total = ko.computed(function() { 
     return +self.prices.Price1() + +self.prices.Price2(); 
    }); 
}; 

Demo: http://jsfiddle.net/Jjgvx/3/