admin管理员组

文章数量:1318156

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?

Share Improve this question asked Feb 1, 2014 at 21:55 Sean AndersonSean Anderson 29.4k33 gold badges132 silver badges242 bronze badges
Add a ment  | 

2 Answers 2

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

本文标签: