1

これは私の場合です: jQuery.Forms を使用して、フォームの送信から ajax 呼び出しを行います。ajax 呼び出しが開始されて返されるとき、それらのイベントに応答するためにさまざまなモデル/ビューが必要です (呼び出しから返されたデータでモデルが更新され、一部のコントロールが無効になってから有効になるなど)。

ビュー内にマップされたフォームがあります。ビューからでもカスタム「formSubmitting」「formSubmitted (with data)」をトリガーし、それらのイベントに応答するモデル/ビューをいくつでも持つにはどうすればよいですか? Backbone.js でこれを行う最も慣用的な方法は何ですか?

編集：

これは私がやろうとしていることです:

    window.UploaderView = Backbone.View.extend({
        initialize: function() {
            this.setElement(this.options.base_div);
            this.$el.find('form').ajaxForm({
                beforeSubmit: function() {
                    this.trigger('ajax-calling');
                },
                success: function(responseJSON) {
                    this.trigger('ajax-called', responseJSON);
                },
                dataType: 'json,'
            });
        },
    });

    var update_uploader = new window.UploaderView({
        base_div: $('#update-upload-action'),
    });

    var trigged = new window.UploaderView({
        parent_view: update_uploader,
        initialize: function() {
            this.options.parent_view.on('ajax-calling', function() {
                alert('calling!');
            });
        },
    });

しかし、これは機能しません (警告メッセージは表示されません)。

ありがとう

4

2 に答える 2

1

AJAX応答はビューの範囲外であるため、「this」はビューに属していません。応答をビューに移動し、_。bindAll（this）;を適用します。問題を修正します。

window.UploaderView = Backbone.View.extend({
    initialize: function() {
        _.bindAll(this);
        this.setElement(this.options.base_div);
        this.$el.find('form').ajaxForm({
            beforeSubmit: this.onBeforeSubmit,
            success: this.onSuccess,
            dataType: 'json,'
        });
    },
    onBeforeSubmit : function() {
        this.trigger('ajax-calling');
    },
    onSuccess: function(responseJSON) {
        this.trigger('ajax-called', responseJSON);
    }
});

var update_uploader = new window.UploaderView({
    base_div: $('#update-upload-action'),
});

var trigged = new window.UploaderView({
    initialize: function() {
        this.options.parent_view.on('ajax-calling', function() {
            alert('calling!');
        });
    },
});
于 2012-10-10T15:21:00.540 に答える
1

関数initializeは、新しいインスタンスを作成するときに実行されることwindow.UploaderViewはなく、代わりにビューのオプションに配置されます (Backbone.jsビューの構築ドキュメントを参照)。

必要なのは、Backbone.Eventsすべてのビュー/モデルから継承され、使用可能な単一のオブジェクトであるイベント バスです。

var eventBus = _.clone(Backbone.Events);

window.UploaderView = Backbone.View.extend({
    initialize: function() {
        this.setElement(this.options.base_div);
        this.$el.find('form').ajaxForm({
            beforeSubmit: function() {
                eventBus.trigger('ajax-calling');
            },
            success: function(responseJSON) {
                eventBus.trigger('ajax-called', responseJSON);
            },
            dataType: 'json,'
        });
    },
});

window.AnotherView = Backbone.View.extend({
    initialize: function() {
        eventBus.on('ajax-calling', this.ajaxCallingHandler);
    },
});

window.AnotherModel = Backbone.Model.extend({
    initialize: function() {
    eventBus.on('ajax-called', this.ajaxCallingHandler);
    },  
});

PSまた、あなたの例のajaxFormsuccessとハンドラーは、ajax設定オブジェクトのスコープで実行されることに注意してください。beforeSubmitしたがって、これらの関数を単に使用することはできず、これらの関数をwiththis.trigger()にバインドするか、クロージャーを使用する必要があります。スコープ バインディングの詳細。window.UploaderView_.bind()

于 2012-10-10T14:01:42.170 に答える