Backbone.js view inheritance

by

The easiest way to inherit a view is to do what other people have already suggested in the comments:

var Pannel = Backbone.View.extend({
});

var PannelAdvanced = Pannel.extend({
});

But like you’ve noted in your comments, if you have an initialize method in Pannel, then it won’t be called if you also have an initialize method in PannelAdvanced, so you have to call Pannel’s initialize method explicitly:

var Pannel = Backbone.View.extend({
   initialize: function(options){
      console.log('Pannel initialized');
      this.foo = 'bar';
   }
});

var PannelAdvanced = Pannel.extend({
   initialize: function(options){
      Pannel.prototype.initialize.apply(this, [options])
      console.log('PannelAdvanced initialized');
      console.log(this.foo); // Log: bar
   }
});

It’s a bit ugly because if you have a lot of Views that inherit from Pannel, then you’ll have to remember to call Pannel’s initialize from all of them. Even worse, if Pannel doesn’t have an initialize method now but you choose to add it in the future, then you’ll need to go to all of the inherited classes in the future and make sure they call Pannel’s initialize. So here’s an alternative way to define Pannel so that your inherited views don’t need to call Pannel’s initialize method:

var Pannel = function (options) {

    // put all of Panel's initialization code here
    console.log('Pannel initialized');
    this.foo = 'bar';

    Backbone.View.apply(this, [options]);
};

_.extend(Pannel.prototype, Backbone.View.prototype, {

    // put all of Panel's methods here. For example:
    sayHi: function () {
        console.log('hello from Pannel');
    }
});

Pannel.extend = Backbone.View.extend;


// other classes inherit from Panel like this:
var PannelAdvanced = Pannel.extend({

    initialize: function (options) {
        console.log('PannelAdvanced initialized');
        console.log(this.foo);
    }
});

var pannelAdvanced = new PannelAdvanced(); //Log: Pannel initialized, PannelAdvanced initialized, bar
pannelAdvanced.sayHi(); // Log: hello from Pannel

More Related Contents:

  1. Maven project version inheritance – do I have to specify the parent version?
  2. Extend data class in Kotlin
  3. Abstract classes in Swift Language
  4. Starting JavaFX from Main method of class which doesn’t extend Application
  5. Overriding a stored property in Swift
  6. Abstract functions in Swift Language
  7. What is the idiomatic way in Go to create a complex hierarchy of structs?
  8. Including another class in SCSS
  9. Is it possible for one struct to extend an existing struct, keeping all the fields?
  10. How to inherit from std::ostream?
  11. Embedding instead of inheritance in Go
  12. How to model a RESTful API with inheritance?
  13. Object Oriented Best Practices – Inheritance v Composition v Interfaces [closed]
  14. How to avoid code duplication of different structs with semantically equal fields/properties?
  15. Extending React.js components
  16. Super in Backbone
  17. Explicitly calling a default method in Java
  18. When do I use super()?
  19. Why we can’t do List mylist = ArrayList(); [duplicate]
  20. Multiple Inheritance in PHP
  21. How do I override List’s Add method in C#?
  22. Can an interface extend multiple interfaces in Java?
  23. Why should I use the “using” keyword to access my base class method?
  24. Grasping prototypical Inheritance through pseudoclassical instantiation (JavaScript)
  25. Javascript Class Inheritance For Functions
  26. Backbone.js model.get() returning ‘undefined’ even though I can see the attributes in console.log
  27. Why would both a parent and child class implement the same interface?
  28. Accessibility and all these JavaScript frameworks
  29. Proper way of doing view mixins in Backbone
  30. Get derived class type from a base’s class static method

Leave a Comment