javascript - Knockout.js 双向绑定(bind) : Number Formatted as String

Question

我的 View 模型中有一堆可观察的金额，我希望将它们存储为数字，因为它们用于多个计算。但是，当我将它们绑定(bind)到 View 中的文本框时，我希望它们显示为特殊格式的字符串 (1234.5678 => "1,234.57")。在这种情况下，完成双向绑定(bind)的最佳方法是什么，因为我不能只将值绑定(bind)与我的可观察对象一起使用？

用户需要能够在文本框中输入“1,234.56”或“1234.56”，这将在 observable 中存储数字值 1234.56，如果我通过 javascript 更改数字值 (3450)，则文本框值需要更新为新值，但格式为字符串(“3,450”)。

感谢您的帮助!

Answer 1

我会实现类似下面的东西:

JavaScript:

function ViewModel() {
    var self = this;
    self.dollarAmount = ko.observable();

    self.formattedDollarAmount = ko.computed({
        read: function() {
            return applyFormat(self.dollarAmount()); // pseudocode
        },
        write: function(value) {
            var parsedDollarAmount = parseFloat(value);
            if(!isNaN(parsedDollarAmount)) {
                self.dollarAmount(parsedDollarAmount);
            }
            else {
                // recommend adding validation of some sort 
                // so getting here is less likely
                alert("invalid dollar amount"); 
            }
        },
        owner: self
    });
}

HTML:

<input type="text" data-bind="value: formattedDollarAmount" />

有关更多信息，请参阅有关计算可观察量的文档:http://knockoutjs.com/documentation/computedObservables.html