Question

我的视图模型中有一堆金额是可观察的，我希望它们存储为数字，因为它们用于多次计算。但是，当我将它们绑定到我视图中的文本框时，我希望它们显示为特殊格式的字符串（1234.5678 =＆gt;“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" />

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

Answer 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

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

2 个答案: