Question

在KO找到我的路，所以请保持温柔！

每个扩展器单独工作，但当我链接它们时，第一个（重置）不会发射。

使用Javascript：

ko.extenders.reset = function (target) {
    var initialValue = target();

    target.reset = function () {
        target(initialValue);
    }

    return target;
}
ko.extenders.numeric = function (target, precision) {
    //create a writeable computed observable to intercept writes to our observable
    var result = ko.computed({
        read: target, //always return the original observables value
        write: function (newValue) {
            var current = target(),
                roundingMultiplier = Math.pow(10, precision),
                newValueAsNum = isNaN(newValue) ? 0 : parseFloat(+newValue),
                valueToWrite = Math.round(newValueAsNum * roundingMultiplier) / roundingMultiplier;

            //only write if it changed
            if (valueToWrite !== current) {
                target(valueToWrite);
            } else {
                //if the rounded value is the same, but a different value was written, force a notification for the current field
                if (newValue !== current) {
                    target.notifySubscribers(valueToWrite);
                }
            }
        }
    }).extend({
        notify: 'always'
    });

    //initialize with current value to make sure it is rounded appropriately
    result(target());

    //return the new computed observable
    return result;
};

function AppViewModel(first, last) {
    this.firstName = ko.observable(first).extend({
        reset: true

    });
    this.lastName = ko.observable(last).extend({
        reset: true,
        numeric: 0
    });
    self.resetAll = function () {
        for (key in self) {
            if (ko.isObservable(self[key]) && typeof self[key].reset == 'function') {
                self[key].reset()
            }
        }
    }
}

ko.applyBindings(new AppViewModel());

HTML：

1 extender (works):<input data-bind='value: firstName' /><br>
2 extenders (doesnt work)<input data-bind='value: lastName' /><br>
<input type="button" value="Reset All" data-bind="click:resetAll" id="ResetInvoiceButton" />

小提琴：

http://jsfiddle.net/sajjansarkar/vk4x2/1/

Answer 1

由于您的numeric扩展程序返回了一个新计算器，因此扩展器的顺序确实重要。

在您当前的设置中，您的reset扩展程序首先运行并将重置函数添加到原始的可观察对象，然后numeric运行，以便它使用全新的计算可观察量覆盖您的“重置增强”可观察量

所以你只需要按正确的顺序执行扩展程序：

this.lastName = ko.observable(last)
                  .extend({ numeric: 0 })
                  .extend({ reset: true });

演示JSFiddle。

请注意，如果您希望为扩展程序设置特定订单，则需要在单独的extend调用中应用它们，否则执行顺序不能保证属于属性的顺序。

Knockout JS中的多个扩展器无法正常工作

1 个答案: