擴展自定義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