Knockout.js双向绑定:格式化为字符串的数字

Question

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

用户需要能够在文本框中输入"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" />

有关详细信息,请参阅计算的observables文档:http://knockoutjs.com/documentation/computedObservables.html