Extension of the custom view Backbone.Marionette. How to implicitly take a prototype of events / onRender?

Question

I have a view:

var MultiSelectCompositeView = Backbone.Marionette.CompositeView.extend({

    events: {
        'click .listItem': 'setSelectedOnClick'
    },

    onRender: function () {
        console.log("MultiSelectCompositeView onRender has executed.");
    }
});

and I have another view that extends MultiSelectCompositeView:

var VideoSearchView = MultiSelectCompositeView.extend({

    events: _.extend(MultiSelectCompositeView.prototype.events, {
        'input @ui.searchInput': 'showVideoSuggestions',
        'click button#hideVideoSearch': 'destroyModel',
        'contextmenu @ui.videoSearchResults': 'showContextMenu'
    },

    onRender: function () {

        this.ui.playlistActions.append((new PlaySelectedButtonView()).render().el);
        this.ui.playlistActions.append((new SaveSelectedButtonView()).render().el);

        //  TODO: Is there a better way to do this?
        MultiSelectCompositeView.prototype.onRender.call(this, arguments);
    }
});

I am unsatisfied with the fact that VideoSearchView does not hide the MultiSelectCompositeView event extensions and that VideoSearchView must manually call the MultiSelectCompositeView onRender method.

Is there anything with Backbone.Marionette that will allow me to expand my custom look in a smoother way?

Answer 1

You did two things here in the wrong way.

. MultiSelectCompositeView, :

events : _.extend({}, MultiSelectCompositeView.prototype.events, {
  'input @ui.searchInput' : 'showVideoSuggestions'
  // ...
})

. ( apply not call):

onRender : function () {
  // ...
  MultiSelectCompositeView.prototype.onRender.apply(this, arguments);
}

"":

var superProto = MultiSelectCompositeView.prototype;
var VideoSearchView = MultiSelectCompositeView.extend({

  onRender : function () {
    // ...
    superProto.onRender.apply(this, arguments);
  }

});

. - .

Answer 2

/... , .

coffeescript, super

onRender: function () {

    this.ui.playlistActions.append((new PlaySelectedButtonView()).render().el);
    this.ui.playlistActions.append((new SaveSelectedButtonView()).render().el);
    super # this will automatically pass the arguments  - notice no parentheses

}

, ::

events: _.extend({}, @::events, # rest of code