Backbone rebinding eventi su una vista

Question

Ho due visualizzazioni, una rappresenta una vista dei client e l'altra è le singole viste client. Ho vincolato gli eventi mouseenter e mouseleave nella vista client per applicare una dissolvenza in apertura e in uscita all'immagine. Funziona bene quando è da solo. Tuttavia, sto anche usando un plugin jQuery per fare un effetto carosello (plugin here). Una volta abilitato, i miei eventi personalizzati non funzionano più. C'è un modo per delegare gli eventi Client View dopo l'inizializzazione del plugin? Questa è la prima volta che utilizzo Backbone, quindi potrei fare anche qualcos'altro.

Ecco il codice:

// 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: Qui sto cercando di delegateEvents() sui punti di vista che sono stati creati (quelli che hanno gli eventi su di essi):

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; 
    } 
}); 

Provato questo, ma non sembra funzionare? Lo sto facendo bene? Penso che il plugin stia facendo più di quanto penso al DOM. Sembra che stia toccando gli elementi che sto tentando di associare e legare a mouseenter e mouseleave. Non ho familiarità con questo plugin, non sembra che abbia una versione non ancora terminata, quindi non riesco a leggerlo troppo bene.

Altri suggerimenti?

Answer 1

è possibile farlo utilizzando delegateEvents metodo l'immagine per associare nuovamente i vostri eventi

utilizzo: myView.delegateEvents()

riferimento alla documentazione http://backbonejs.org/#View-delegateEvents per ulteriori informazioni

modificare:

questo plugin di lega e unbinds mouseenter/leave senza namespacing - apri lo script plugin e aggiungi namespace all'evento binding e unbinding.

applicare queste correzioni ad ogni occorrenza di questi e dovrebbe essere ok anche senza l'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() { ...