Sự kiện liên kết xương sống trên một góc nhìn

Question

Tôi có hai chế độ xem, một chế độ hiển thị chế độ xem khách hàng và chế độ xem khác là chế độ xem khách hàng riêng lẻ. Tôi đang ràng buộc các sự kiện mouseenter và mouseleave trong chế độ xem khách hàng để mờ dần và phủ lên lớp phủ trên hình ảnh. Điều này làm việc tốt khi nó là của chính nó. Tuy nhiên, tôi cũng đang sử dụng một plugin jQuery để thực hiện hiệu ứng băng chuyền (plugin here). Khi điều đó được bật, sự kiện tùy chỉnh của tôi sẽ không hoạt động nữa. Có cách nào tôi có thể ủy quyền các sự kiện Xem khách hàng sau khi plugin được khởi tạo không? Đây là lần đầu tiên tôi sử dụng Backbone vì vậy tôi có thể đang làm điều gì khác sai.

Đây là mã:

// 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: Ở đây tôi đang cố gắng để delegateEvents() trên quan điểm đã được tạo (những người mà có các sự kiện trên chúng):

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

Đã thử điều này nhưng dường như không hoạt động? Tôi làm đúng không? Tôi nghĩ rằng plugin đang làm nhiều hơn tôi nghĩ đến DOM. Có vẻ như nó đang chạm vào các phần tử mà tôi đang cố gắng liên kết cũng như ràng buộc với mouseenter và mouseleave. Tôi không quen với plugin này, có vẻ như nó chưa có phiên bản chưa được sửa đổi nên tôi không thể đọc nó quá rõ.

Bất kỳ đề xuất nào khác?

Answer 1

bạn có thể làm điều đó bằng delegateEvents phương pháp tầm nhìn của bạn kết nối lại các sự kiện của bạn

sử dụng: myView.delegateEvents()

tham khảo các tài liệu http://backbonejs.org/#View-delegateEvents để biết thêm

chỉnh sửa:

plugin này với phím tắt và unbinds mouseenter/để lại mà không có không gian tên - mở tập lệnh plugin và thêm không gian tên cho sự kiện ràng buộc và unbinding.

áp dụng các bản sửa lỗi cho tất cả các xuất hiện của những điều này và nó phải được ok ngay cả khi không 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() { ...