Backbone.js:在视图/模型之间定制订阅和发布定制事件

ndh0cuux  于 2022-11-10  发布在  其他
关注(0)|答案(2)|浏览(117)

这是我的情况:我使用jQuery.Forms在提交表单时调用 AJAX 。当ajax调用开始和返回时,我需要各种模型/视图来响应这些事件(模型用调用返回的数据更新,一些控件被禁用然后被启用等等)。
我在一个视图中Map了表单。我如何从视图中触发一个自定义的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!');
            });
        },
    });

但这不起作用(不显示任何警报消息)。

pbossiut

pbossiut1#

当你创建新的window.UploaderView示例时,你的initialize函数不会被执行,而是被放置在视图的选项中(参见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);
    },  
});

另外,请注意,示例中的ajaxForm successbeforeSubmit处理程序是在ajax设置对象的作用域中执行的。因此,您不能只在其中使用this.trigger(),而必须使用_.bind()将这些函数绑定到window.UploaderView,或者使用闭包.More on scope binding

e5njpo68

e5njpo682#

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!');
        });
    },
});

相关问题