[英]Extending a custom Backbone.Marionette view. How to implicitly incur prototype's events/onRender?
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: 我有另一个扩展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. 我对VideoSearchView不会隐式扩展MultiSelectCompositeView的事件以及VideoSearchView必须手动调用MultiSelectCompositeView的onRender方法这一事实感到不满。
Is there something with Backbone.Marionette which would allow me to extend my custom view in a more seamless fashion? Backbone.Marionette有什么东西可以让我以更加无缝的方式扩展我的自定义视图吗?
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:
不要更改MultiSelectCompositeView的原型,只需创建并使用新对象:
events : _.extend({}, MultiSelectCompositeView.prototype.events, {
'input @ui.searchInput' : 'showVideoSuggestions'
// ...
})
Second. 第二。 Execute super method with proper arguments (using
apply
not call
): 使用适当的参数执行super方法(使用
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 . 另请参阅 - Backbone中的Super 。
Not as part of marionette/backbone... I know, it is a pain. 不是木偶/骨干的一部分......我知道,这是一种痛苦。
If you use coffeescript you can use the super keyword 如果您使用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
} }
As for your events extension you can use the ::
至于您的活动扩展,您可以使用
::
events: _.extend({}, @::events, # rest of code
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.