Dlaczego moje obliczone knockoutwy nie działają?

Question

Nie mogę wydawać się mieć wartość obliczoną to działa. jakikolwiek wkład byłby doceniony.

Otrzymuję wartości dla moich cen z serwera.

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

zmiennej prices jest obserwowalne, ale jej członkowie nie są. Redefine to tak:

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

Teraz to prawie roboty, ale jeśli zmienić wartości, to będzie przekonwertować je na ciągi znaków, więc suma 18 i 12 będzie 1812! Będziemy musieli zmienić te łańcuchy w liczby.

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

Powinieneś być gotowy!

Answer 2

Wy mieszane rzeczy się trochę: Każda wartość, że inne części Twojego modelu widoku powinny być w stanie reagować na razie zmienił muszą być widoczne. W twoim przypadku masz obiekt "ceny", który jest obserwowalny, ale właściwości tego obiektu (takie jak "Cena1" i "Cena2") nie są obserwowalne. Oznacza to, że obliczona obserwowalna wartość zostanie zaktualizowana tylko wtedy, gdy cały obiekt umieszczony w "cenach" zostanie zastąpiony przez nową wartość.

Więc po prostu, aby te wartości 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/