Question

为什么示例代码中的文字input只显示输入的数字值，而不是带有“$”的格式化值？

function MyViewModel() {
    var self = this;
    this.price = ko.observable(25.99);

    this.formattedPrice = ko.computed({
        read: function () {
            return "$" + self.price().toFixed(2);
        },
        write: function (value) {
            // Strip out unwanted characters, parse as float, then write the raw data back to the underlying "price" observable
            value = parseFloat(value.replace(/[^\.\d]/g, ""));
            self.price(isNaN(value) ? 0 : value); // Write to underlying storage
        },
        owner: self
    });
}

ko.applyBindings(new MyViewModel());

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
<p>Price: <input data-bind="value: formattedPrice" /></p>

Answer 1

你的代码很好。

当值改变时，Knockout调用write方法 - 这通常在焦点离开文本框时发生。尝试更改值然后按Tab键 - 您应该看到显示的值更改。

如果您想更新每个按键的显示，可以尝试[textInput binding] [1]，但不建议这样做，因为它往往与打字过程冲突。尝试

[1]：http://knockoutjs.com/documentation/textinput-binding.html＆＃34; textInput binding＆＃34;，但是对于这样的字段，您可能会发现它不合适，因为它在您键入时会发生变化。

在文本输入中显示计算的observable

1 个答案: