0

私は自己完結型の jquery ui コンポーネントを構築しています。このコンポーネントを使用する人は誰でも十分に制御できるようにしたいと考えています。たとえば、フォームはコンポーネントの重要な部分であり、コンポーネントには組み込みのフォーム検証がありますが、ユーザーが組み込みの検証を無効にするオプションを提供しています。それに加えて、独自のフォーム検証を実行できるようにしてほしいです。

そのため、フォーム送信ボタンがクリックされると、カスタム イベントが発生し、ブール値がチェックされます。

this.element.trigger('customEvent');
if(canContinue) { ...

ブール値はデフォルトで true ですが、ユーザーは mycustomEventをリッスンしてから検証を行うことができ、検証が失敗した場合はブール値を false に切り替えて、フォームが送信されないようにすることができると考えています。

これは機能します。

しかし、それは一緒にハッキングされているように感じます。これを標準的な方法で行っているのか、許容できる方法で行っているのかわかりません。この種のロジックを実行するために、Javascript や JQuery にもっとうまく使用できるものはありますか?

4

2 に答える 2

2

はい、これは triggerHandler メソッドを使用して簡単にできます。

var handlerResult = this.element.triggerHandler("customEvent");
if (handlerResult || typeof handlerResult == "undefined") {
    alert("Success!");                           
}

キャンセルするためにユーザーがしなければならないことは、false を返すことだけです。

サンプル: http://jsfiddle.net/7B2Kw/1/

于 2013-08-09T19:47:33.803 に答える
0

戦略設計パターンを実装し、検証をデフォルト戦略として実装し、ユーザーがカスタム戦略を実装できるようにすることができます。ユーザーは、他の検証戦略を使用してコンポーネントを構成できます (構成プロパティの 1 つとして渡す、またはインスタンス化後にコンポーネントの関連プロパティを設定するなど)。以下に例を示します。

$(function() {
    $.widget( "custom.mycomponent", {
        options: {
            validate: null
        },
        _validate: function() {
            return true;
        },
        _create: function() {
            this.options.validate = this.options.validate || this._validate;
            var that = this;
            this.element.on('keypress', function() {
                if(that.option('validate')()) {
                    this.style.backgroundColor = 'green';
                } else {                                        
                    this.style.backgroundColor = 'red';
                }
            });
        },
        _setOptions: function() {
            this._superApply( arguments );
        },
        _setOption: function(key, value) {
            switch(key) {
                case 'validate': 
                    if(typeof value !== 'function') return;
            }
            this._super( key, value );
        }
    });

    // Instantiate with default options
    $('#my-component1').mycomponent();

    // Pass another validation strategy
    $('#my-component2').mycomponent({validate: function() {return false;}});

});

実際の作業例http://jsbin.com/inavur/4/edit

于 2013-08-09T19:54:11.783 に答える