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/