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/で動作しますが、整数が5未満であっても、検証関数でmaxNumberがerrorMessageプロパティをクリアしない理由など、なぜ動作するのかわかりません最小のこの例またはその逆。

これらの関数はどのような順序で実行されますか?

私が言うように、それは私がやりたいことをしますが、それがどのように機能しているのか理解できません。正直に言うと、それが機能するとは思っていませんでした.

誰でも光を当てることができますか？

よろしく、ゲイリー

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 に答える