javascript - Knockout JS 中的多个扩展器不起作用

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" />

fiddle :

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

Answer 1

因为您的numeric 扩展器返回一个新的计算值，所以您的扩展器的顺序很重要。

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

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

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

演示 JSFiddle .

请注意，如果您想为扩展器指定特定顺序，则需要在单独的 extend 调用中应用它们，否则无法保证执行顺序与属性顺序一致。