5

私は現在、Jquery ValidationとQtipを一緒に使用して、実際の検証と、検証オプションのerrorPlacementコンポーネントを使用した検証エラー時の優れたツールチップスタイルの通知を使用した画面への情報の表示を処理しています。

現在、各viewModelには、検証とコールバックを設定および開始するための独自のカスタムメソッドがありますが、データバインディングを介して検証ルールを設定するためのカスタムバインディングを追加するなど、これを行うためのより良い方法を検討しようとしていました。別の方法ですが、それでも同じ結果が得られます（つまり、検証エラーが発生したときにerrorPlacementがトリガーされ、指定された要素のエラーを表示するようにQtipに指示します）。

自分で作成を開始する前に、オンラインでチェックしてノックアウト検証を見つけました。これは最初は素晴らしいアイデアだと思っていました。検証ロジックをviewModel内のデータに直接適用してから、Qtipを取得するためのコールバックを見つけることができました。キックインしますが、文書化されているコールバックはないようです。ライブラリは、物事の表示側だけでなく、物事の検証側のために私が望むすべてを行っているようです。ソースコードと例を調べましたが、エラーを含むオブザーバブルを提供するko.validation.group（viewModel）以外は見つかりませんでしたが、これを以前と同じように使用できるかどうかはわかりません。期待。

これが私の現在の検証がどのように行われるかの例です：

/*globals $ ko */
function SomeViewModel() {

    this.SetupValidation = function () {
        var formValidationOptions = {
            submitHandler: self.DoSomethingWhenValid,
            success: $.noop,
            errorPlacement: function (error, element) {
                if (!error.is(':empty'))
                { qtip.DoSomethingToDisplayValidationErrorForElement(element, error); }
                else
                { qtip.DoSomethingToHideValidationErrorForElement(element); }
            }
        };

        $(someForm).validate(formValidationOptions);
        this.SetupValidationRules();
    };

    this.SetupValidationRules = function() {
        $(someFormElement1).rules("add", { required: true, minlength: 6, maxlength: 20, alphaNumeric: true });
        $(someFormElement2).rules("add", { required: true, minlength: 6, maxlength: 20 });
        $(someFormElement3).rules("add", { required: true, email: true, });
    };
}

現在、カスタムバインディングを追加することで検証ルールメソッドの必要性を排除できると確信しています。これにより、データバインドで検証を設定できますが、可能であれば、既存のノックアウトで同じ種類のコールバックアプローチを使用したいと思います。検証バインディング。

4

2 に答える 2

5

私はKnockout-Validationを特に使用していませんが、過去に同様のことを書いています。ソースをひと目見ると、拡張された各オブザーバブルがサブオブザーバブル isValidを取得していることがわかります。これは、従来のノックアウト表示バインディングを使用して、マークアップ内の表示メッセージを非表示にするために使用できます。

QTipを機能させるには、カスタムバインディングをこのisValidプロパティにサブスクライブし、必要な初期化を実行して、トリガーされたときにQTipを表示/非表示にすることができます。

編集

これがあなたが始めるための例です

http://jsfiddle.net/madcapnmckay/hfcj7/

HTML：

<!-- Note that you have to reference the "qtipValMessage" binding -->
<!-- using the "value" binding alone is not enough                -->
<input data-bind="value: emailAddress, qtipValMessage : emailAddress" />

JS：

ko.bindingHandlers.qtipValMessage = {
    init: function (element, valueAccessor, allBindingsAccessor, viewModel) {
        var observable = valueAccessor(), $element = $(element);
       if (observable.isValid) {
            observable.isValid.subscribe(function(valid) {
                if (!valid) {
                    $element.qtip({
                        overwrite: true,
                        content: {
                            text: observable.error
                        }
                     });
                 } else {
                     $element.qtip("destroy");
                 }
           });
       }
    }
};
于 2012-02-24T17:42:09.710 に答える
1

私はmadcapnmckayの投稿を編集していましたが、その違いは十分に重要になり、新しい答えが必要だと思います。

これはmadcapnmckayの投稿に大きく基づいていますが、MorganTileyによって指摘されたバグを修正します。オリジナルは、ユーザーがオブザーバブルを変更した場合にのみ機能します。そうでない場合、コードが実行されることはありません。そこで、変更時だけでなく、作成時にツールチップコードを起動するように変更しました。

ko.bindingHandlers.qtipValMessage = {
    init: function (element, valueAccessor, allBindingsAccessor, viewModel) {
        var observable = valueAccessor(), $element = $(element);
        if (observable.isValid) {
            var updateTooltip = function (valid) {
                if (!valid) {
                    $element.qtip({
                        overwrite: true,
                        content: {
                            text: observable.error
                        }
                    });
                } else {
                    $element.qtip("destroy");
                }
            }
            updateTooltip();
            observable.isValid.subscribe(updateTooltip);
        }
    }
};

1つの欠点は、ノックアウト検証が実行される前にツールチップがホバー時に表示されることです（たとえば、フィールドに「必須」の検証があり、送信を押す前に、フィールドが必須であるとツールチップが表示されますが、フィールドは表示されませんピンクでハイライトします）。ただし、フィールドを変更すると、フィールドが有効な場合はツールチップが表示されなくなります。

私のアプリはqtipを使用していませんでしたが、Twitter Bootstrap Tooltipを使用していたので、そのためのコードもここにあります。

ko.bindingHandlers.invalidTooltip = {
    init: function (element, valueAccessor, allBindingsAccessor, viewModel) {
        var observable = valueAccessor(), $element = $(element);
        if (observable.isValid) {
            var updateTooltip = function (valid) {
                if (!valid) {
                    $element.attr("data-original-title", observable.error);
                    $element.tooltip();

                } else {
                    $element.tooltip("destroy");
                }
            }
            updateTooltip();
            observable.isValid.subscribe(updateTooltip);
        }
    }
};
于 2013-03-12T21:55:35.980 に答える