这是我的情况:我使用jQuery.Forms来提交ajax调用提交表单。当ajax调用启动并返回时,我需要各种模型/视图来响应这些事件(模型使用调用返回的数据进行更新,某些控件被禁用然后启用等等。)
我在View中映射了表单。如何从视图中触发自定义“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!');
});
},
});
但这不起作用(没有显示警告信息)。
由于
答案 0 :(得分:1)
创建新的initialize
实例时,window.UploaderView
函数永远不会被执行,而是放在视图的选项中(参见Backbone.js View construction documentation)。
您需要的是一个事件总线,从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);
},
});
P.S。另请注意,示例中的ajaxForm success
和beforeSubmit
处理程序是使用ajax设置对象的范围执行的。因此,您不能在其中使用this.trigger()
,并且必须使用window.UploaderView
将这些函数绑定到_.bind()
或使用闭包。 More on scope binding
答案 1 :(得分: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!');
});
},
});