在淘汰赛中应用多个扩展器答案

【问题标题】：Applying multiple extenders in knockout在淘汰赛中应用多个扩展器
【发布时间】：2013-05-16 04:18:34
【问题描述】：

我有以下 javascript 代码

function AppViewModel(){
    this.myValue = ko.observable().extend({ minNumber: "5"}).extend({ maxNumber: "20" });
}

ko.extenders.minNumber = function(target, minValue){
    target.hasError = ko.observable();
    target.errorMessage = ko.observable();

    function validate(newValue){
        target.hasError(parseInt(newValue) < parseInt(minValue) ? true : false);
        target.errorMessage(parseInt(newValue) < parseInt(minValue) ? "MinVal" : "");
    }

    validate(target());

    target.subscribe(validate);

    return target;
};

ko.extenders.maxNumber = function(target, maxValue){
    target.hasError = ko.observable();
    target.errorMessage = ko.observable();

    function validate(newValue){
        target.hasError(parseInt(newValue) > parseInt(maxValue) ? true : false);
        target.hasError(parseInt(newValue) > parseInt(maxValue) ? "MaxVal" : "");
    }

    validate(target());

    target.subscribe(validate);

    return target;
};

ko.applyBindings(new AppViewModel());

和下面的 HTML

<input data-bind="value: myValue, valueUpdate: 'afterkeydown'"/><br/>
<span data-bind="text: myValue"></span>
<span data-bind="text: myValue.errorMessage"></span>
<span data-bind="text: myValue.hasError"></span>

我想要实现的是对具有最小和最大整数值的可观察对象进行验证。我的代码工作 http://jsfiddle.net/Gazzo100uk/nCtpx/5/ 但我不确定它为什么工作，例如为什么 maxNumber 不清除其验证函数中的 errorMessage 属性，即使在这个例子中整数小于 5，反之亦然。

这些函数的触发顺序是什么？

就像我说的，它做我想让它做的事情，但我不明白它是如何工作的，老实说我没想到它会起作用。

请问有人能解释一下吗？

问候，加里

【问题讨论】：

我决定将我的扩展方法中的可观察名称更改为与此小提琴 jsfiddle.net/Gazzo100uk/nCtpx/8 中的不同，因为我不太高兴将之前的代码放入不了解它是如何工作的。跨度>
只是出于好奇，您为什么不使用淘汰赛验证？ (github.com/Knockout-Contrib/Knockout-Validation) 如果您尝试过淘汰赛验证并决定不使用它，我想知道您的推理。
嗨，杰夫，由于各种原因，我没有使用淘汰赛验证，当时我只是在做服务器端开发，所以整个 javascript 世界对我来说都是新的，所以要掌握淘汰赛本身就够了。最重要的是，扩展一个可观察对象非常容易，随着我们验证的进展，我们需要更复杂的验证，即验证一个依赖于其他两个可观察对象的值然后进一步的要求意味着我们正在使用传递的自定义函数验证可观察对象在扩展方法中。此时最后期限像往常一样迫在眉睫。

标签： javascript knockout.js observable extender

【解决方案1】：

我认为导致它“工作”的主要问题是您没有在 maxNumber 扩展器中设置 errorMessage，因此它没有被不当清除：

function validate(newValue){
    target.hasError(parseInt(newValue) > parseInt(maxValue) ? true : false);
    target.hasError(parseInt(newValue) > parseInt(maxValue) ? "MaxVal" : "");
}

【讨论】：

谢谢，是的，这是一个剪切和粘贴错误。我想虽然我仍然不应该这样做，因为我在 minValue 检查和 maxValue 检查中设置了两次相同的子可观察对象？
是的，使用您拥有的原始样本（已修复错字），他们可能会对同一个 observable 进行冲突更新。