Knockout.js 双向绑定：数字格式化为字符串答案

【问题标题】：Knockout.js Two-way Binding: Number Formatted as StringKnockout.js 双向绑定：数字格式化为字符串
【发布时间】：2012-09-01 11:39:40
【问题描述】：

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

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

感谢您的帮助！

【问题讨论】：

标签： javascript knockout.js knockout-mapping-plugin knockout-2.0 knockout-validation

【解决方案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

【讨论】：

【解决方案2】：

见：

http://jsfiddle.net/Ty8PG/14/

ko.bindingHandlers.numericValue = {
init : function(element, valueAccessor, allBindingsAccessor) {
    var underlyingObservable = valueAccessor();
    var interceptor = ko.computed({
        read: underlyingObservable,
        write: function(value) {

                underlyingObservable(rawNumber(value));

        } 
    });
    ko.bindingHandlers.value.init(element, function() { return interceptor }, allBindingsAccessor);
},   
update : function(element, valueAccessor, allBindingsAccessor) {
element.value = number_format(valueAccessor()(), 2);

}

};

原帖：

https://groups.google.com/forum/#!topic/knockoutjs/gvhJt4iSOLk

【讨论】：