如何綁定子視圖處理事件的情況下在父視圖

Question

我有以下的骨幹視圖的：

var ParentView = Backbone.View.extend({ 
    events: { 
     "contextmenu .child-view" : "handleChildView" 
    }, 

    initialize: function() { 
     // create child view 
     var child = new ChildView; 
    }, 

    handleChildView: function() { 
    } 
}); 

var ChildView = Backbone.View.extend({ 

    initialize: function() { 
     this.el.addClass('child-view'); 
    } 
}); 

我需要處理在handleChildView處理childView的contextmenu事件。但我需要參考childView和目標DOM元素。

我該怎麼做？

Answer 1

我通常會盡量避免。我認爲這是一種反模式，因爲我相信每個視圖只應該處理它自己的事件。

當有需要的視圖之間通知事件，我用的是事件總線模式（發佈/訂閱）

看到這個答案，我早些時候發佈：

Call a function in another Marionette.ItemView

這是相似的。

您應該在您的應用中定義一個事件總線。 而在你ChildView，當事情發生時（如點擊）

var ChildView = Backbone.View.extend({ 
    events: { 
    'click': 'handleClick' 
    }, 
    handleClick: function() { 
    //publish event 
    EventBus.trigger('childViewClicked', [anything you wanna pass]); 
    } 
}); 

，並在你的父視圖發佈事件，訂閱此事件：

var ParentView = Backbone.View.extend({ 
    initialize: function() { 
    //subscribe events: 
    EventBus.on('childViewClicked', this.handleChildView, this); 
    }, 

    handleChildView: function ([params you wanna receive]) { 
    } 
}); 

Answer 2

這是否適合您？

var ParentView = Backbone.View.extend({ 
    events: { 
     "click .child-view .contextmenu" : "handleChildView" 
    }, 

    initialize: function() { 
     // create child view 
     var child = new ChildView; 
    }, 

    handleChildView: function() { 
    } 
}); 

var ChildView = Backbone.View.extend({ 
    className:'child-view' 
    , initialize: function() { 
     this.el.addClass('child-view'); 
    } 
}); 

您可能需要呈現父視圖中的子視圖（在DOM）