knockout.js - 在文本输入中显示计算出的 observable

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 “textInput 绑定”，但是对于这样的字段，您可能会发现它不适合，因为它会随着您键入而改变。