Backbone 将 Backbone 从 0.9 升级到 1.2 后查看事件未触发
Backbone View event not firing after upgrading Backbone from 0.9 to 1.2
我已经将我的 Web 应用程序从 Backbone 0.9.10 升级到 Backbone 1.2.1,除了一个例外,一切都很好。请看下面的代码:
define( ['underscore', 'backbone', 'text!templates/myResults.html'], function (_, Backbone, Template) {
var myView = Backbone.View.extend({
el: '#myResults',
initialize: function (options) {
this.targetLoc = options.targetLoc;
},
events: function() {
var _events = {};
_events ['show ' + this.targetLoc + ' a'] = 'tabClicked';
return _events;
},
tabClicked: function (e) {
....stuff....
}
template: _.template(Template),
render: function() {
var outputHTML = this.template({model: this.model.toJSON()});
this.$el.append(outputHTML);
return this;
}
});
});
return myView;
在我升级 Backbone 之前,我的 tabClicked
事件顺利触发。现在它没有触发,当我在 events
函数中 console.log(this.targetLoc);
时,它说 this.targetLoc
是 undefined.
我什至尝试添加:
this.events['show ' + this.targetLoc + ' a'] = 'tabClicked';
转initialize
函数无效。
此应用程序正在使用:
- jQuery 1.9.1
- jQuery UI 1.10.3
- 下划线 1.8.3
- Bootstrap JS 2.3.1
- 需要 2.1.5
- Backbone 1.2.1(以前的 0.9.10)
显然 Backbone 的 0.9 变为 1.2,关于如何解决我的问题有什么想法吗?
根据 changelog,在 1.2.0 中,视图委托事件的方式发生了变化
Views now always delegate their events in setElement. You can no longer modify the events hash or your view's el property in initialize.
因此您不能再依赖在 initialize
中设置的属性来动态创建事件哈希。但是,您还可以使用 constructor
。
plunker 上的快速 demo 显示这适用于 1.2.2。
var MyView = Backbone.View.extend({
constructor: function(options) {
this.eventTarget = options.eventTarget;
Backbone.View.apply(this, arguments);
},
events: function() {
var _events = {};
_events['click ' + this.eventTarget] = 'clicked';
return _events;
},
clicked: function(e) {
console.log(e);
},
render: function() {
this.$el.html('<a class="foo">click</a>');
}
});
基本上,您应该能够通过将 events
依赖的逻辑移动到 constructor
而不是在 initialize
中来解决此更改。唯一需要注意的是,你必须记住调用 Backbone.View
.
的原始构造函数
所以尝试用
替换你的initialize
constructor: function (options) {
this.targetLoc = options.targetLoc;
Backbone.View.apply(this, arguments);
},
我已经将我的 Web 应用程序从 Backbone 0.9.10 升级到 Backbone 1.2.1,除了一个例外,一切都很好。请看下面的代码:
define( ['underscore', 'backbone', 'text!templates/myResults.html'], function (_, Backbone, Template) {
var myView = Backbone.View.extend({
el: '#myResults',
initialize: function (options) {
this.targetLoc = options.targetLoc;
},
events: function() {
var _events = {};
_events ['show ' + this.targetLoc + ' a'] = 'tabClicked';
return _events;
},
tabClicked: function (e) {
....stuff....
}
template: _.template(Template),
render: function() {
var outputHTML = this.template({model: this.model.toJSON()});
this.$el.append(outputHTML);
return this;
}
});
});
return myView;
在我升级 Backbone 之前,我的 tabClicked
事件顺利触发。现在它没有触发,当我在 events
函数中 console.log(this.targetLoc);
时,它说 this.targetLoc
是 undefined.
我什至尝试添加:
this.events['show ' + this.targetLoc + ' a'] = 'tabClicked';
转initialize
函数无效。
此应用程序正在使用:
- jQuery 1.9.1
- jQuery UI 1.10.3
- 下划线 1.8.3
- Bootstrap JS 2.3.1
- 需要 2.1.5
- Backbone 1.2.1(以前的 0.9.10)
显然 Backbone 的 0.9 变为 1.2,关于如何解决我的问题有什么想法吗?
根据 changelog,在 1.2.0 中,视图委托事件的方式发生了变化
Views now always delegate their events in setElement. You can no longer modify the events hash or your view's el property in initialize.
因此您不能再依赖在 initialize
中设置的属性来动态创建事件哈希。但是,您还可以使用 constructor
。
plunker 上的快速 demo 显示这适用于 1.2.2。
var MyView = Backbone.View.extend({
constructor: function(options) {
this.eventTarget = options.eventTarget;
Backbone.View.apply(this, arguments);
},
events: function() {
var _events = {};
_events['click ' + this.eventTarget] = 'clicked';
return _events;
},
clicked: function(e) {
console.log(e);
},
render: function() {
this.$el.html('<a class="foo">click</a>');
}
});
基本上,您应该能够通过将 events
依赖的逻辑移动到 constructor
而不是在 initialize
中来解决此更改。唯一需要注意的是,你必须记住调用 Backbone.View
.
所以尝试用
替换你的initialize
constructor: function (options) {
this.targetLoc = options.targetLoc;
Backbone.View.apply(this, arguments);
},