視圖上的骨幹重新綁定事件

我有兩個視圖，一個表示客戶端視圖，另一個視圖是單個客戶端視圖。我將綁定客戶端視圖中的mouseenter和mouseleave事件以淡入淡出圖像上的覆蓋圖。當它本身就可以正常工作。不過，我也使用jQuery插件來做輪播效果（插件here）。一旦啓用，我的自定義事件不再起作用。有什麼辦法可以在插件初始化後委派客戶端視圖事件嗎？這是我第一次使用Backbone，所以我可能會做其他的錯誤。視圖上的骨幹重新綁定事件

下面是代碼：

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

編輯：在這裏，我想delegateEvents()上創建的視圖（即對它們產生的事件的）：

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

試過這個，但似乎沒有工作？我做對了嗎？我認爲這個插件比我想象的DOM做得更多。它看起來像觸摸了我試圖綁定的元素，以及綁定到mouseenter和mouseleave。我對這個插件不熟悉，看起來並不像它有一個非版本化的版本，所以我不能很好地閱讀它。

其他建議？

來源

2012-02-21 Brandon

可能是我錯了，但是你沒有任何事件附加到你的ClientsView – Awea 2012-02-21 15:46:42

如果你不通過選擇器到第e事件對象事件綁定到視圖'el'ement – 2012-02-21 16:21:25

你可以做，使用您的視圖delegateEvents方法重新綁定您的活動

用法：myView.delegateEvents()

參考更多信息的文檔http://backbonejs.org/#View-delegateEvents

編輯：

這個插件綁定和取消綁定mouseenter/leave without namespacing - 打開插件腳本並將命名空間添加到事件綁定和解除綁定中。

應用這些修復了這些每一次出現，它應該確定，即使沒有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() { ...

來源

2012-02-21 16:20:34

我更新了我的答案，並嘗試使用'delegateEvents（）'，但仍然無效。可能與插件有關... – Brandon 2012-02-21 16:54:57

檢查修復編輯 – 2012-02-21 17:09:57

感謝您的幫助。沒有工作，插件必須做得比我想象的要多。我現在只想在afterCreate回調中使用常規的jQuery委託。 – Brandon 2012-02-21 17:50:48

視圖上的骨幹重新綁定事件

回答

相關問題