如何在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 
    } 
});