Knockout JS 中的多个扩展器不起作用答案

【问题标题】：Multiple Extenders in Knockout JS not workingKnockout JS 中的多个扩展器不起作用
【发布时间】：2013-12-30 16:33:12
【问题描述】：

只是在 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/

【问题讨论】：

标签： javascript knockout.js

【解决方案1】：

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

在您当前的设置中，您的 reset 扩展器首先运行，并将重置功能添加到您的原始 observable，但随后 numeric 运行，因此它使用全新的计算 observable 覆盖您的“重置增强” observable。

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

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

演示JSFiddle.

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

【讨论】：