knockout.js - 为一堆变量的格式化值创建一个计算的 observable

Question

我在 View 模型中有 3 个可观察变量，并希望输出为格式化值。但是，我不想为它们中的每一个编写计算方法，因为它们是相同的。重用代码的最佳方法是什么？谢谢。

我要实现的代码是:

   this.formattedPrice = ko.computed({
        read: function () {
            return '$' + this.price().toFixed(2);
        },
        write: function (value) {
            // Strip out unwanted characters, parse as float, then write the raw data back to the underlying "price" observable
            value = parseFloat(value.replace(/[^\.\d]/g, ""));
            this.price(isNaN(value) ? 0 : value); // Write to underlying storage
        },
        owner: this
    });

失败的例子是: Jsfiddle

谢谢，

Answer 1

您可以通过以下几种方法使其可重用。

如果您想在 View 模型中处理此问题，那么一个不错的选择是创建一个扩展，它将格式化的计算 observable 存储为原始的“sub-observable”。您可以使用 extenders 扩展 observables或通过添加到共享 fn描述的对象here .我更喜欢后者。

因此，您可以向 observables 添加一个名为 withCurrencyFormat 的函数。 .它可能看起来像:

ko.observable.fn.withCurrencyFormat = function(precision) {
    var observable = this;
    observable.formatted = ko.computed({
        read: function (key) {
            return '$' + (+observable()).toFixed(precision);
        },
        write: function (value) {
            value = parseFloat(value.replace(/[^\.\d]/g, ""));
            observable(isNaN(value) ? null : value); // Write to underlying storage 
        }        
    }); 

    return observable;
};

现在，你可以说:

 self.week1Amount = ko.observable(w1).withCurrencyFormat(2);
 self.week2Amount = ko.observable(w2).withCurrencyFormat(2);
 self.week3Amount = ko.observable(w3).withCurrencyFormat(2);

并在 UI 中绑定(bind)它，例如:

    <td><input data-bind="value: week1Amount.formatted" /></td>
    <td><input data-bind="value: week2Amount.formatted" /></td>
    <td><input data-bind="value: week3Amount.formatted" /></td>

示例: http://jsfiddle.net/rniemeyer/xskJN/

另一种选择是将其移动到绑定(bind)中，这样您就可以不理会您的 View 模型。这将使用类似的代码，但在自定义绑定(bind)处理程序中可能如下所示:

ko.bindingHandlers.valueAsCurrency = {
    init: function(element, valueAccessor) {
        var observable = valueAccessor(),
            formatted = ko.computed({
                read: function (key) {
                    return '$' + (+observable()).toFixed(2);
                },
                write: function (value) {
                    value = parseFloat(value.replace(/[^\.\d]/g, ""));
                    observable(isNaN(value) ? null : value); // Write to underlying storage 
                },
                disposeWhenNodeIsRemoved: element                
            });

        //apply the actual value binding with our new computed
        ko.applyBindingsToNode(element, { value: formatted });
    }        
};

因此，在绑定(bind)处理程序中，我们创建了我们的计算，然后使用 value约束它。

现在，您的 View 模型不需要更改，您可以在 UI 中绑定(bind)，如下所示:

    <td><input data-bind="valueAsCurrency: week1Amount" /></td>
    <td><input data-bind="valueAsCurrency: week2Amount" /></td>
    <td><input data-bind="valueAsCurrency: week3Amount" /></td>

示例: http://jsfiddle.net/rniemeyer/sD6y4/