的情况:我使用jQuery.Forms在提交表单时进行ajax调用。当 ajax 调用开始并返回时,我需要各种模型/视图来响应这些事件(模型使用调用返回的数据进行更新,某些控件被禁用然后启用,依此类推)。
我在视图中映射了表单。如何从视图中触发自定义formSubmitting
"表单已提交(带数据)",并让任意数量的模型/视图响应这些事件?使用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!');
});
},
});
但这不起作用(不显示警报消息)。
window.UploaderView
实例时,您的initialize
函数永远不会执行,而是将其放置在视图的选项中(请参阅主干.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 success
和beforeSubmit
处理程序是使用 ajax settings 对象的范围执行的。因此,您不能只在其中使用 this.trigger()
,而必须将这些函数绑定到 window.UploaderView
with _.bind()
或使用闭包。详细了解范围绑定。
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!');
});
},
});