javascript 视图上的主干重新绑定事件
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9379854/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Backbone rebinding events on a view
提问by Brandon
I have two views, one represents a view of clients and the other is the individual client views. I am binding the mouseenterand mouseleaveevents in the client view to fade in and out an overlay on the image. This works fine when it is by itself. However, I am also using a jQuery plugin to do a carousel effect (plugin here). Once that is enabled, my custom events no longer work. Is there any way I can delegate the Client View events after the plugin is initialized? This is my first time using Backbone so I might be doing something else wrong as well.
我有两种观点，一种代表客户的观点，另一种是个别客户的观点。我正在绑定客户端视图中的mouseenter和mouseleave事件以淡入和淡出图像上的叠加层。这在单独使用时效果很好。但是，我也使用 jQuery 插件来实现轮播效果（插件在这里）。一旦启用，我的自定义事件就不再起作用。有什么办法可以在插件初始化后委托客户端视图事件？这是我第一次使用 Backbone，所以我也可能做错了其他事情。
Here is the code:
这是代码：
// Client View
window.ClientView = Backbone.View.extend({
tagName: 'li',
template: _.template($("#client-template").html()),
className: 'client-thumb',
events: {
"mouseenter": "fadeOutOverlay",
"mouseleave": "fadeInOverlay"
},
initialize: function() {
},
render: function() {
$(this.el).html(this.template(this.model.toJSON()));
return this;
},
fadeOutOverlay: function() {
$(this.el).find(".slider-image-overlay").fadeOut('fast');
},
fadeInOverlay: function() {
$(this.el).find(".slider-image-overlay").fadeIn('fast');
}
});
// Clients View
window.ClientsView = Backbone.View.extend({
el: "#clients",
initialize: function() {
this.collection.bind('all', this.render, this);
},
render: function() {
var $clients = $("<ul class='clearfix'></ul>");
_.each(this.collection.models, function(client) {
var view = new ClientView({model: client});
$clients.append(view.render().el);
});
$(this.el).hide().append($clients).fadeIn().scrollingCarousel();
return this;
}
});
EDIT: Here I am trying to delegateEvents()on the views that were created (the ones that have the events on them):
编辑：在这里，我正在尝试delegateEvents()创建的视图（具有事件的视图）：
App.View.ClientsView = Backbone.View.extend({
el: "#clients",
initialize: function() {
this.collection.bind('all', this.render, this);
},
render: function() {
var $clients = $("<ul class='clearfix'></ul>");
var views = [];
_.each(this.collection.models, function(client) {
var view = new App.View.ClientView({model: client});
views.push(view); // Store created views in an array...
$clients.append(view.render().el);
});
$(this.el).hide().append($clients).fadeIn().scrollingCarousel({
// Use the plugin's callback to try to delegate events again
afterCreateFunction: function() {
_.each(views, function(view){
view.delegateEvents();
});
}
});
return this;
}
});
Tried this but doesn't seem to work? Am I doing it right? I think that the plugin is doing more than I think to the DOM. It looks like it is touching the elements I am trying to bind to as well as binding to mouseenterand mouseleave. I am unfamiliar with this plugin, doesn't look like it has an unminified version so I can't read it too well.
试过了，但似乎不起作用？我做得对吗？我认为该插件对 DOM 的作用超出了我的想象。看起来它正在触及我试图绑定到的元素以及绑定到mouseenter和mouseleave。我不熟悉这个插件，看起来它没有未缩小的版本，所以我看不太好。
Any other suggestions?
还有其他建议吗？
回答by Tom Tu
you can do that using delegateEventsmethod of your view to rebind your events
你可以使用delegateEvents你的视图方法来重新绑定你的事件
usage: myView.delegateEvents()
用法： myView.delegateEvents()
reference the documentation http://backbonejs.org/#View-delegateEventsfor more info
参考文档http://backbonejs.org/#View-delegateEvents了解更多信息
edit:
编辑：
this plugin binds and unbinds mouseenter/leave without namespacing - open the plugin script and add namespace to the event binding and unbinding.
此插件绑定和解除绑定 mouseenter/leave 而不使用命名空间 - 打开插件脚本并将命名空间添加到事件绑定和解除绑定。
apply these fixes to every occurence of these and it should be ok even without the delegateEvents()
将这些修复程序应用于这些修复程序的每次出现，即使没有 delegateEvents()
r.unbind("mouseenter");=> r.unbind("mouseenter.carousel");r.unbind("mouseleave");=> r.unbind("mouseleave.carousel");
r.unbind("mouseenter");=> r.unbind("mouseenter.carousel");r.unbind("mouseleave");=>r.unbind("mouseleave.carousel");
r.mouseenter(function() { ...=> r.bind('mouseenter.carousel', function() { ...r.mouseleave(function() { ...=> r.bind('mouseleave.carousel', function() { ...
r.mouseenter(function() { ...=> r.bind('mouseenter.carousel', function() { ...r.mouseleave(function() { ...=>r.bind('mouseleave.carousel', function() { ...
