Knockout.js textInput域互相依賴

Question

因此，用戶想要購買一些馬鈴薯。他可以以千克爲單位輸入馬鈴薯的數量，以美元計算總價格，或者他可以進行反轉 - 輸入美元並獲得馬鈴薯千克。所以有2個輸入字段。

要求：值必須在鍵入後立即更新。在一個字段中輸入值會更新另一個字段，反之亦然。公斤數必須保持完整，只有一個例外 - 當用戶自己輸入不完整的重量時。

價格以美分內部存儲。價格以每1000千克美元的價格顯示給用戶。千克數量總是整數。

這裏是我的代碼：

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

    this.totalPrice = ko.observable(); 
    this.pricePerKg = ko.observable(999); 
    this.potatoWeight = ko.computed({ 
     read: function() { 
      var totalPrice = self.totalPrice(); 
      var potatoWeight = (totalPrice * 100)/self.pricePerKg() * 1000; 
      return Math.round(potatoWeight); 
     }, 
     write: function (potatoWeight) { 
      var totalPrice = (potatoWeight * self.pricePerKg())/100/1000; 
      self.totalPrice(totalPrice.toFixed(2)); 

     } 
    }); 

}; 
ko.applyBindings(new ViewModel()); 

HTML：

<label for="potato">Potato, kg</label> 
<input type="text" id="potato" data-bind="textInput: potatoWeight"> 
<label for="priceTotal">Price total, $</label> 
<input type="text" id="priceTotal" data-bind="textInput: totalPrice"> 

<div> Price per 1000 kilogram: 
<span data-bind="text: (pricePerKg()/100).toFixed(2)"> 
</span>$ 

的jsfiddle：https://jsfiddle.net/9td7seyv/13/

問題：當您在 「土豆減肥」 這類型值更新不僅以美元爲價值，但也是本身。由於四捨五入會導致不一致。轉到上面的jsfiddle並嘗試在重量字段中輸入500。當你輸入最後一個零時，它會自動變爲501。

那麼有沒有辦法阻止現場更新本身，或者可能需要其他方法來解決這個問題？

Answer 1

對於這種情況，我能想到的最直接的方法是在計算後保留用戶輸入的值的副本......如下面的代碼所示。

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

    this.totalPrice = ko.observable(); 
    this.pricePerKg = ko.observable(999); 
    this.weight=ko.observable(); 
    this.potatoWeight = ko.computed({ 
     read: function() { 
      return self.weight(); 
     }, 
     write: function (potatoWeight) { 
      var totalPrice = (potatoWeight * self.pricePerKg())/100/1000; 
      self.totalPrice(totalPrice.toFixed(2)); 
         self.weight(potatoWeight); 
     } 
    }); 

}; 
ko.applyBindings(new ViewModel()); 

https://jsfiddle.net/9td7seyv/16/

更新： 對於這兩個值 https://jsfiddle.net/9td7seyv/19/