2

我有以下 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 in这个例子，反之亦然。

这些函数将以什么顺序被触发？

就像我说的，它做我想做的事，但我不明白它是如何工作的，老实说，我从没想过它会工作。

任何人都可以解释一下吗？

问候，加里

4

1 回答 1

1

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

function validate(newValue){
    target.hasError(parseInt(newValue) > parseInt(maxValue) ? true : false);
    target.hasError(parseInt(newValue) > parseInt(maxValue) ? "MaxVal" : "");
}
于 2013-05-21T13:55:49.677 回答