Omurga yeniden oluşturma olayları bir görünümde

Question

İki görünümüm var, biri istemcilerin görünümünü temsil ediyor ve diğeri de bireysel istemci görünümleri. Resimde bir üst üste bindirmek ve sollamak için istemci görünümünde mouseenter ve mouseleave olaylarını bağlarım. Bu kendi başına olduğunda iyi çalışır. Ancak, bir atlıkarınca etkisi yapmak için bir jQuery eklentisi kullanıyorum (plugin here). Bu etkinleştirildikten sonra özel etkinliklerim artık çalışmaz. Eklenti başlatıldıktan sonra İstemci Görünümü olaylarını devretmek için herhangi bir yolu var mı? Bu, Backbone'u ilk defa kullanmam, bu yüzden yanlış bir şey de yapabilirim.

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

DÜZENLEME: Burada

kodudur Burada oluşturulan görünümleri (üzerlerinde etkinlik olanlar) delegateEvents() çalışıyorum:

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

Bunu denedim ama işe yaramıyor mu? Doğru yapıyor muyum? Ben eklentinin DOM'a düşündüğümden daha fazlasını yaptığını düşünüyorum. mouseenter ve mouseleave ile bağlamaya çalıştığım öğelere dokunmak gibi görünüyor. Bu eklentiye aşina değilim, unremified bir sürümü var gibi görünmüyor, bu yüzden çok iyi okuyamıyorum.

Başka önerileriniz var mı?

Answer 1

etkinliklerinizi yeniden bağlamanız Görünümünüzün delegateEvents yöntemini kullanarak da yapabilirsiniz

kullanımı: myView.delegateEvents()

referans fazla bilgi için dokümantasyon http://backbonejs.org/#View-delegateEvents

düzenleme:

bu eklenti bağlar ve mouseenter'ı engeller/ad-boşluk bırakmadan bırakın - eklenti komut dosyasını açın ve olayın ciltlenmesini ve açılmasını ad alanına ekleyin.

Bunların her olayın gerçekleşmiş bu düzeltmeleri uygulamak ve hatta 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() { ...