Backbone/Marionetteのクラスを「深く拡張する」または「モジュール的に拡張する」方法はありますか？

Question

Marionetteには、私たちが拡張したい「マスタービュー」があります。

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

理想的なユースケースは、マスタークラス/ビューの、ほとんどの機能を実装し、機能の一部を修正するだろう、より具体的な景色に、このビュー、またはクラスを拡張することになります。

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

問題は、イベントハッシュなどの選択的な変更方法や、特定の子ビューオプションをオーバーライドする方法がわかりません。具体的に：

1. MotorcycleColorChooserDropdownがeventsを目的としている場合、それはPaginatedDropdownがために待機しているすべてのイベントをオーバーライドします。どのようにミックスして一致させるのですか？我々はPaginatedDropdownclickイベントのすべての機能をしたい場合はどうすれば、私たちもそれに少しを追加したい：？（潜在的に解決不可能なイベントオブジェクトPaginatedDropdownのイベントで自身を組み合わせたMotorcycleColorChooserDropdownにオブジェクトを持つ

2. を許可MotorcycleColorChooserDropdownに？私たちは手動で子クラスに親からのすべての機能を固執する必要がありますか？

私たちは、単にこのような拡張されたビューをやって、または時間でMotorcycleColorChooserDropdown = PaginatedDropdown.extend();、その後、1のようなものをやっていないと考えられてきました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を拡張します。

2番目は、子のコンテキストとイベントオブジェクトを渡すだけで、子の親メソッドを呼び出します。

非常に冗長ですが、非常に明示的です。あなたのコードを読んでいる人は、何が起こっているのかを正確に知るでしょう。

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