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/

问题：当您在＆＃34;马铃薯重量＆＃34;中键入值时它不仅更新美元价值，还更新本身。由于四舍五入导致不一致。转到上面的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/

Knockout.js textInput字段相互依赖

1 个答案: