扩展自定义Backbone.Marionette视图。如何隐含地引发原型事件/ onRender？

Question

我有一个观点：

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

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

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

我有另一个扩展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);
    }
});

我对VideoSearchView不会隐式扩展MultiSelectCompositeView的事件以及VideoSearchView必须手动调用MultiSelectCompositeView的onRender方法这一事实感到不满。

Backbone.Marionette有什么东西可以让我以更加无缝的方式扩展我的自定义视图吗？

Answer 1

你在这里做错了两件事。

第一。 不要更改MultiSelectCompositeView的原型，只需创建并使用新对象：

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

第二。 使用适当的参数执行super方法（使用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);
  }

});

另请参阅 - Backbone中的Super 。

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