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/