javascript - Extending a custom Backbone.Marionette view. How to implicitly incur prototype's eventsonRender? - Stack Ov

admin管理员组

文章数量:1318336

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 which 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'm unhappy with the fact that VideoSearchView doesn't implicitly extend the events of MultiSelectCompositeView and that VideoSearchView has to manually call MultiSelectCompositeView's onRender method.

Is there something with Backbone.Marionette which would allow me to extend my custom view in a more seamless fashion?

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 which 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'm unhappy with the fact that VideoSearchView doesn't implicitly extend the events of MultiSelectCompositeView and that VideoSearchView has to manually call MultiSelectCompositeView's onRender method.

Is there something with Backbone.Marionette which would allow me to extend my custom view in a more seamless fashion?

• javascript
• backbone.js
• marionette

Share Improve this question Follow asked Feb 1, 2014 at 21:55 Sean AndersonSean Anderson 29.4k3333 gold badges132132 silver badges242242 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 8

You have done two things here in the wrong way.

First. Do not change the prototype of the MultiSelectCompositeView, just create and use a new object:

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

Second. Execute super method with proper arguments (using apply not call):

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

Or you can use "shortcut":

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

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

});

See also - Super in Backbone.

Not as part of marionette/backbone... I know, it is a pain.

If you use coffeescript you can use the super keyword

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

}

As for your events extension you can use the ::

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

本文标签：