我想创建两个(或更多) View 实例,每个实例具有不同的 el 属性,并通过backbone.js View 的事件哈希(而不是通过 jQuery)将事件绑定(bind)到它们。
当所有实例都具有相同的 el
时触发事件简单:
someView = Backbone.View.extend({
el: '#someDiv',
events: {
'click': 'someFunction'
},
someFunction: function(){
//Do something here
}
});
到目前为止,如果我分配
el
在 initialize
函数,并设置events
通常如下,事件不会触发:someView = Backbone.View.extend({
events: {
'click': 'someFunction'
},
initialize: function( options ){
this.el = options.el
},
someFunction: function(){
//Do something here
}
});
我的第一直觉是拥有
el
是一个函数,它返回感兴趣的 dom 元素的字符串表示形式:someView = Backbone.View.extend({
el: function(){
return '#someDiv-' + this.someNumber
},
events: {
'click': 'someFunction'
},
initialize: function( options ){
this.someNumber = options.someNumber
},
someFunction: function(){
//Do something here
}
});
但是,这会触发
someFunction
x 次,如果我有 someView
的 x 个实例化.接下来我尝试设置
el
和 events
initialize
中的属性:someView = Backbone.View.extend({
initialize: function( options ){
this.el = options.el
this.events = {
'click': 'someFunction'
}
},
someFunction: function(){
//Do something here
}
});
但这不会触发事件。在这一点上,我几乎钓鱼。
有谁知道如何用
el
实例化一个backbone.js View ?特定于该实例,该实例具有仅针对该实例触发的事件,而不是 View
的其他实例?
最佳答案
你实际上并不需要经历所有“this.element”的东西。
Backbone 自动将 View 的“el”设置为作为选项传递给构造函数的“el”。
然后在整个 View 中以“this.el”的形式提供。
这就是您需要做的所有事情:
x = Backbone.View.extend({
events: {
'click': 'say_hi'
},
initialize: function( options ){
// Not actually needed unless you're doing something else in here
},
say_hi: function(){
alert( this.el.id );
}
});
y = new x( {el: '#div-1'} );
z = new x( {el: '#div-2'} );
z.say_hi();
y.say_hi();
看到这个现场 jsFiddle:http://jsfiddle.net/edwardmsmith/QDFwf/15/
您的第二个示例不起作用的原因是,使用最新版本的 Backbone,您不能再直接设置“el”。正如您所注意到的,这不会正确设置/更新事件。
不工作
initialize: function( options ){
this.el = options.el;
}
如果你想以这种方式动态设置 el,你需要使用 View.setElement因为这样可以正确委派事件并设置缓存的 this.$el .
作品
initialize: function( options ){
this.setElement(options.el)
}
您的第二个示例的实时 jsFiddle:http://jsfiddle.net/edwardmsmith/5Ss5G/21/
但这只是重新做 Backbone 中已经在做的事情。
关于backbone.js - 动态分配backbone.js View el的正确方法,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11210438/