私のknockoutjsが観測可能に計算されないのはなぜですか？

Question

私はこの仕事の計算値を持つように見えません。どんな入力も高く評価されます。

私はサーバーから私の価格の値を取得します。

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

あなたprices変数が観測可能であるが、そのメンバーではありません。このようにそれを再定義：

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

さて、このほとんど作品がありますが、値を変更した場合、それは文字列に変換しますので、18と12の合計が1812になります！これらの文字列を数値に変換する必要があります。

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

すべて設定する必要があります。

Answer 2

あなた混在物事ビットを：変更した場合、あなたのビューモデルの他の部分が上に反応することができるはずというすべての値が観測可能でなければなりません。あなたのケースでは、オブザーブ可能なオブジェクト「価格」がありますが、このオブジェクトのプロパティ（「Price1」や「Price2」など）はオブザーバブルではありません。つまり、計算された観測値は、「価格」に配置されたオブジェクト全体が新しい値に置き換えられる場合にのみ更新されます。

だから、これらの値は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(); 
    }); 
}; 

デモ：http://jsfiddle.net/Jjgvx/3/