Eventos de redireccionamiento de red troncal en una vista

Question

Tengo dos vistas, una representa una vista de clientes y la otra son las vistas de cliente individuales. Estoy vinculando los eventos mouseenter y mouseleave en la vista del cliente para fundir una superposición en la imagen. Esto funciona bien cuando está solo. Sin embargo, también estoy usando un plugin jQuery para hacer un efecto de carrusel (plugin here). Una vez que está habilitado, mis eventos personalizados ya no funcionan. ¿Hay alguna forma de que pueda delegar los eventos de Client View después de que se inicialice el complemento? Esta es la primera vez que uso Backbone, así que podría estar haciendo algo diferente también.

Aquí está el código:

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

EDITAR: Aquí estoy tratando de delegateEvents() sobre los puntos de vista que se crearon (los que tienen los eventos en ellos):

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

Intenté esto pero parece que no funciona? ¿Lo estoy haciendo bien? Creo que el plugin está haciendo más de lo que pienso en el DOM. Parece que está tocando los elementos a los que estoy intentando vincular, así como los vinculados a mouseenter y mouseleave. No estoy familiarizado con este complemento, no parece que tenga una versión no miniaturizada, así que no puedo leerlo demasiado bien.

¿Alguna otra sugerencia?

Answer 1

que puede hacer que el uso de delegateEvents método de la vista de volver a vincular los eventos

uso: myView.delegateEvents()

referencia la documentación http://backbonejs.org/#View-delegateEvents para obtener más información

de edición:

este plugin se une y desvincula mouseenter/leave sin espacio de nombres - abre el script del complemento y agrega el espacio de nombres al enlace y desvinculación del evento.

aplican estas correcciones para cada ocurrencia de estos y debería estar bien, incluso sin la 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() { ...