How to override tagName, id, className, el, and events from sub views?

Question

Let's say I have the following Backbone structure:

 var BrowserView = Backbone.View.extend({
   el: 'body',
   events: {
     click : "onClickEvent"
   },

   initialize: function () {
     this.collections = [];
   }
 });

 var FileBrowserView = BrowserView.extend({
   el: '#file',
   className: 'file-class',
   events: {
     click: "onFileClick",
     mouseover: "onMouseOver"   
   },

   initialize: function () {
     this.constructor.__super__.initialize.apply(this);     
   }
 });

I need to override tagName, id, className, el properties from child View and combine events object from child view with parent view. How can I do that?

I think this is a duplicate question http://stackoverflow.com/questions/9403675/backbone-view-inherit-and-extend-events-from-parent once you inherit the event you can override the properties and it will work. — Rayweb_on, Apr 13 '13 at 18:41

score 1 · Accepted Answer · answered Apr 13 '13 at 23:16

For the tagName, id, className and el properties you can simply override them by setting new values as you did.
For the events, you can use the same trick you used for the initialize method simply because the events key can be a function.

events: function(){
  return _.extend({}, this.constructor.__super__.events, {
    // list of events
  });
}

Note that this won't work for several levels of inheritance, so, the exact formula would be:

events: function(){
  return _.extend({}, _.result(this.constructor.__super__, 'events'), {
    // list of events
  });
}

How to override tagName, id, className, el, and events from sub views?

1 Answers1