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

时间:2013-05-21 11:50:08

标签: javascript knockout.js observable extender

我有以下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>

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

这些功能会以什么顺序被解雇?

就像我说的那样,它做了我想做的事,但我不明白它是如何工作的,说实话,我从没想过它会起作用。

请有人放光吗?

此致 加里

1 个答案:

答案 0 :(得分:1)

我认为导致它“正常工作”的主要问题是您没有在errorMessage扩展程序中设置maxNumber,因此未对其进行不当清除:

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