Backbone-rebinding-events auf einen Blick
Ich habe zwei Blicke, eine stellt eine Sicht der Klienten und der andere ist für die einzelnen client-Ansichten. Ich bin verbindlich, die mouseenter
und mouseleave
Veranstaltungen in der client-Ansicht um die fade in-und out-overlay auf dem Bild. Dies funktioniert gut, wenn es von selbst. Allerdings bin ich auch mit einem jQuery-plugin zu tun, einem Karussell-Effekt (plugin hier). Sobald das aktiviert ist, können Sie eigene benutzerdefinierte Ereignisse nicht mehr arbeiten. Gibt es eine Möglichkeit, die ich delegieren kann die Client-Ansicht-events, nachdem das plugin initialisiert wird? Dies ist mein erstes mal mit Rückgrat, so könnte ich etwas anderes falsch als gut.
Hier ist der 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;
}
});
BEARBEITEN: Hier bin ich versucht zu delegateEvents()
auf die Ansichten, die erstellt wurden (diejenigen, die die Ereignisse auf Sie):
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;
}
});
Versuchte dies aber nicht zu funktionieren scheint? Mache ich es richtig? Ich denke, dass das plugin tut mehr, als denke ich an die DOM. Es sieht aus wie es ist rührend, die Elemente, die ich bin versucht zu binden, sowie die Bindung an mouseenter
und mouseleave
. Ich bin nicht vertraut mit diesem plugin, sieht nicht aus wie es hat eine unminified-version, damit ich es nicht Lesen kann, zu gut.
Irgendwelche anderen Vorschläge?
- Kann sein das ich falsch bin, aber Sie haben nicht jede Veranstaltung an Ihre ClientsView
- wenn Sie, die dont pass ein Selektor, um das Event-Objekt-Ereignisse gebunden sind, zu der Ansicht
el
ement
Du musst angemeldet sein, um einen Kommentar abzugeben.
können Sie tun, dass die Verwendung
delegateEvents
- Methode der view zu binden, Ihre VeranstaltungenVerwendung:
myView.delegateEvents()
Verweis auf die Dokumentation http://backbonejs.org/#View-delegateEvents für mehr info
edit:
dieses plugin bindet und entbindet mouseenter/leave ohne Verwendung von Namensräumen - öffnen Sie das plugin-Skript und fügen namespace zu der Veranstaltung verbindlich und unverbindlich.
gelten diese Updates zu jedem Ereignis ein und es sollte ok sein, auch ohne die
delegateEvents()
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() { ...
delegateEvents()
aber funktioniert immer noch nicht. Wahrscheinlich etwas zu tun mit dem plugin...