ビューのバックボーン・リビルド・イベント

Question

2つのビューがあり、1つはクライアントのビューを表し、もう1つは個々のクライアント・ビューです。私はmouseenterとmouseleaveイベントをクライアントビューにバインドして、イメージのオーバーレイをフェードインまたはフェードインします。これは単独ではうまく動作します。しかし、私はまた、カルーセル効果（プラグインhere）を行うためにjQueryプラグインを使用しています。これが有効になると、カスタムイベントはもはや機能しなくなります。プラグインが初期化された後にクライアントビューのイベントを委任できる方法はありますか？バックボーンを使ったのはこれが初めてのことなので、何か他のことも間違っているかもしれません。ここで

コードは次のとおりです。

// 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：ここでは私が作成したビュー（それらのイベントを持っているもの）に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にバインドしているようです。私はこのプラグインに慣れていない、それが未完成のバージョンを持っているようには見えないので、あまりにもうまく読めない。

他の提案はありますか？

Answer 1

あなたのイベントを再バインドするために、あなたの視野のdelegateEvents方法を使用していることを行うことができます

用法：myView.delegateEvents()

参照詳細はドキュメントhttp://backbonejs.org/#View-delegateEvents

編集：

このプラグイン結合し、マウスペイント/ネームスペースなしのままにする - プラグインスクリプトを開き、ネームスペースをイベントバインディングとバインド解除に追加します。

は、これらのすべての出現にこれらの修正プログラムを適用し、それも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() { ...