2

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

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

感谢您的帮助！

4

2 回答 2

6

我会实现如下内容：

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

于 2012-09-07T15:15:16.060 回答
0

看 ：

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

于 2014-04-30T15:25:42.800 回答