如何在Backbone/Marionette中「深度擴展」或「模塊化擴展」課程？

Question

在Marionette中，我們有一個我們想要擴展的「主視圖」。

var MotorcycleColorChooserDropdown = PaginatedDropdown.extend({ 
    events: { 
     'mouseenter': function() { return 'vroom'; }; 
    } 
}); 

：

var PaginatedDropdown = Marionette.CompositeView.extend({ 
    template: template, 
    events: { 
    'click': function() { return 'hello';}, 
    'keyup': function() { return 'goodbye'} 
    }, 
    childViewOptions: { 
    tagName: 'li' 
    } 
}); 

理想的用例將通過將實現的大多數功能，並修改主類/視圖的一些特徵，更具體的視圖來延伸該視圖中，或類，

問題是我們不確定如何有選擇地修改事件，如事件散列，或覆蓋某些兒童視圖選項。具體做法是：

1. 如果MotorcycleColorChooserDropdown有events對象時，它會覆蓋所有的PaginatedDropdown被監聽的事件。我們如何混搭？ （允許有一個事件的MotorcycleColorChooserDropdown對象，結合自身與PaginatedDropdown的事件對象

2. 潛在無法解決：如果我們希望PaginatedDropdownclick事件的所有功能，但我們也想給它添加一點點在MotorcycleColorChooserDropdown？難道我們就必須手動堅持一切從父功能分爲兒童類？

我們已經考慮在一個時間根本就沒有做這樣的推廣意見，或做這樣的事情MotorcycleColorChooserDropdown = PaginatedDropdown.extend();，然後一個做MotorcycleColorChooserDropdown.events = PaginatedDropdown.events.extend({...});但這似乎是凌亂，醜陋，我敢肯定那裏這是更好的方法。

Answer 1

這裏是我一直在做

var PaginatedDropdown = Marionette.CompositeView.extend({ 
    template: template, 
    events: { 
    'click': 'onClick', 
    'keyup': function() { return 'goodbye'} 
    }, 
    onClick:function(e){ 
     return 'hello' 
    }, 
    childViewOptions: { 
    tagName: 'li' 
    } 
}); 

var MotorcycleColorChooserDropdown = PaginatedDropdown.extend({ 
    events: _.extend({ 
     'click': 'onClick', 
     'mouseenter': function() { return 'vroom'; }; 
    },PaginatedDropdown.prototype.events), 
    onClick:function(e){ 
     PaginatedDropdown.prototype.onClick.call(this,e) 
     //code 
    } 
}); 

關於第一個問題，我只是延長了孩子events與父events。

至於第二，我只是調用父子方法，傳遞子上下文和事件對象。

它非常詳細，但也非常明確。有人閱讀你的代碼就會知道到底發生了什麼。

Answer 2

，你可以：

var PaginatedDropdown = Marionette.CompositeView.extend({ 
    template: template, 
    childViewOptions: { 
    tagName: 'li' 
    }, 
    "events": function() { 
    'click': 'onClick', 
    'keyup': 'onKeyUp' 
    }, 
    "onClick": function() { 
     return 'hello'; 
    }, 
    "onKeyUp": function() { 
     return 'hello'; 
    }, 
}); 

var MotorcycleColorChooserDropdown = PaginatedDropdown.extend({ 
    "events" : function() { 
     //Question: 
     //Basically extending the first events by using the marionette event function and extending it. 
     var parentEvents = PaginatedDropdown.prototype.events, 
      events = _.extend({}, parentEvents); 

     events['mouseenter'] = this.onMouseEnter; 
     //add all of the events of the child 
     return events; 
    } 
    "onMouseEnter": function() { 
     return 'vroom'; 
    }, 
    "onClick": function() { 
     //Question 2: 
     //Applying the parent's method 
     PaginatedDropdown.prototype.onClick.apply(this, arguments); 

     //and adding new code here 
    } 
});