3

私は現在、基本的に送信するフォームを提供する Javascript モジュールを作成しています。

これを書いているときに、典型的なスコープの問題と思われる問題に遭遇しました。

submit()メソッドで AJAX 呼び出しを行い、オブジェクト メソッドを使用して呼び出しの成功と失敗を処理する必要があります。submit()はイベント ハンドラであるため、オブジェクトthisに設定されなくなりました。したがって、またはflagBoxにアクセスできなくなりました。flagBox.showSuccess()flagBox.showFail()

最初は、オブジェクト全体の自己参照を設定して、 のようなものを呼び出せるようにする方法を探していましたself.showSuccess()。

今のところjQuery.proxy()、ハンドラーのコンテキストを設定するために使用しています。

また、pub/sub パターンを実装するか、メソッドを にアタッチすることも考えましたevent.data。

他にどのような解決策があるのか​​、まだ見つかっていない「ベスト プラクティス」があるかどうかに興味があります。

(function( $ ) {

    var FlagBox = function() {};
    FlagBox.prototype = {

        constructor: FlagBox,

        init: function() {
            $('.flag-content-box')
                .on('submit', $.proxy(this.submit, this));
        },

        ...

        showSuccess: function() {
            console.log('success');
        },

        showFail: function() {
            console.log('fail');
        },

        submit: function(event) {
            event.preventDefault();

            var that = this;
                formData = $(event.target).serializeObject();

            $.ajax({
                type:"POST",
                url: '/flag/add.json',
                data: formData,
                success : function(data) {
                    that.showSuccess();
                },
                error : function(jqXHR, textStatus, errorThrown) {
                    showFail();
                }
            });
        }
    };

    var flagBox = new FlagBox();
    flagBox.init();

})(jQuery);
4

1 に答える 1

0

このように、成功/失敗メソッドをオブジェクトにバインドできます。このようにして、常にオブジェクトのコンテキストで成功/失敗メソッドが呼び出されます。

(function( $ ) {

    var FlagBox = function() {};
    FlagBox.prototype = {

        constructor: FlagBox,

        init: function() {
            $('.flag-content-box')
                .on('submit', $.proxy(this.submit, this));
        },

        ...

        showSuccess: function() {
            console.log('success');
        },

        showFail: function() {
            console.log('fail');
        },

        submit: function(event) {
            event.preventDefault();

            var that = this;
                formData = $(event.target).serializeObject();

            var successFn = (function(obj){
                return function(){
                    return obj.showSuccess.apply(obj, arguments)
                }
            })(this);  

            var failureFn = (function(obj){
                return function(){
                    return obj.showFailure.apply(obj, arguments);
                }
            })(this);  

            $.ajax({
                type:"POST",
                url: '/flag/add.json',
                data: formData,
                success : successFn,
                error : failureFn
            });
        }
    };

    var flagBox = new FlagBox();
    flagBox.init();

})(jQuery);
于 2013-07-22T04:53:04.170 に答える