Backbone 的 delegateEvents 在附加到 DOM 之后才绑定事件
Backbone's delegateEvents doesn't bind events until after attached to DOM
我正在开发聊天客户端,我遇到了 Backbone 事件系统的问题。
当客户端启动时,我将视图渲染为:
var view = new ServerListView({collection: Chatter.servers});
Chatter.Views.servers = view;
$('#channels > ul').html(view.render().el);
工作正常,事件被调用。
说到这些事件:
events: {
"click .server": "server",
"click .server ul li": "channel",
"click .server .slider": "slide"
},
有问题的渲染方法:
render: function(){
var self = this;
this.$el.html("");
this.collection.each(function(server){
self.$el.append(self.template(server.toJSON()));
var header = self.$el.find('li.server[data-id="' + server.id + '"]')
var connection = Chatter.Connections[server.id];
if (connection) {
if (connection.channels.length > 0) {
connection.channels.each(function(channel) {
$(header).find("ul").append("<li data-channel-id=\"" + channel.id + "\">" + channel.get('name') + "</li>");
}, self);
}
}
}, self);
this.delegateEvents();
return self;
},
每次调用它时,它都应该正确地重新渲染所有服务器和通道的视图。一切都正确呈现,但没有调用事件。
我按照渲染它的方式重新渲染它:
$('#channels > ul').html(Chatter.Views.servers.render().el);
无论出于何种原因,在渲染时都没有调用上述事件,有什么想法吗?
谢谢
编辑:我忘了提一件事:
如果我重新渲染它:
var view = Chatter.Views.servers;
$('#channels > ul').html(view.render().el);
view.delegateEvents();
然后就可以正常工作了,我知道这没问题,但我 99% 确定我不应该这样做,而且我不想每次都这样做我重新渲染视图。
再次感谢。
This Whosebug question might help. 你有视图的初始化函数吗?也许初始化函数可以接受一个参数(jQuery 对象,它指定视图应该渲染到的位置),以便它把自己渲染到页面上的适当位置,然后你可以在初始化函数中委托事件,如果事件不会自动委派。
无论如何,我很想听听其他人的意见。
我正在开发聊天客户端,我遇到了 Backbone 事件系统的问题。
当客户端启动时,我将视图渲染为:
var view = new ServerListView({collection: Chatter.servers});
Chatter.Views.servers = view;
$('#channels > ul').html(view.render().el);
工作正常,事件被调用。 说到这些事件:
events: {
"click .server": "server",
"click .server ul li": "channel",
"click .server .slider": "slide"
},
有问题的渲染方法:
render: function(){
var self = this;
this.$el.html("");
this.collection.each(function(server){
self.$el.append(self.template(server.toJSON()));
var header = self.$el.find('li.server[data-id="' + server.id + '"]')
var connection = Chatter.Connections[server.id];
if (connection) {
if (connection.channels.length > 0) {
connection.channels.each(function(channel) {
$(header).find("ul").append("<li data-channel-id=\"" + channel.id + "\">" + channel.get('name') + "</li>");
}, self);
}
}
}, self);
this.delegateEvents();
return self;
},
每次调用它时,它都应该正确地重新渲染所有服务器和通道的视图。一切都正确呈现,但没有调用事件。
我按照渲染它的方式重新渲染它:
$('#channels > ul').html(Chatter.Views.servers.render().el);
无论出于何种原因,在渲染时都没有调用上述事件,有什么想法吗?
谢谢
编辑:我忘了提一件事:
如果我重新渲染它:
var view = Chatter.Views.servers;
$('#channels > ul').html(view.render().el);
view.delegateEvents();
然后就可以正常工作了,我知道这没问题,但我 99% 确定我不应该这样做,而且我不想每次都这样做我重新渲染视图。
再次感谢。
This Whosebug question might help. 你有视图的初始化函数吗?也许初始化函数可以接受一个参数(jQuery 对象,它指定视图应该渲染到的位置),以便它把自己渲染到页面上的适当位置,然后你可以在初始化函数中委托事件,如果事件不会自动委派。
无论如何,我很想听听其他人的意见。