Mast inheritance

Question

I am trying to write a Backbone view for an object browser that is designed to be implemented in several places with different types of objects and a slightly different job. How can I make good use of the code.

I tried just expanding the spine in my browser and then expanding the browser in my implementation, but this leaves me with some properties that are common. This is an undesirable effect because data is added to all implementations every time you create a browser.

Can someone shed light on a way to solve this problem, or perhaps an alternative solution?

Here are some sample code to help you better understand how it currently stands:

var BrowserView = Backbone.View; _.extend(BrowserView.prototype, Backbone.View.prototype, { className: 'browser', collections: [], events: { }, _events:{ }, initialize: function () { this._initialize(); }, render: function () { this._render(); }, _initialize: function () { this.container = $( this.make('div', {class: 'container'} ) ); this.$el.append(this.container); if ( this.options.collections ) { this.collections = []; _.each(this.options.collections, this.add, this); } _.extend(this.events, this._events); this.delegateEvents(); }, _render: function () { this.container.empty(); _.each(this.collections, function (view) { this.container.append(view.el); view.render(); }, this); } }); BrowserView.extend = Backbone.View.extend; var ContactBrowserView = BrowserView.extend({ }); 

As always, I more than welcome feedback on any aspect of the code snippet I have provided.

Thanks Alex

EDIT My problem is that the subclass shares the collections property. The following is an example of my own solution that initializes the collection property through an inherited method. jsfiddle.net/JhZXh/3

Answer 1

This belt shows the best alternative: https://gist.github.com/2287018

Answer 2

I think I understood the answer to my own problem.

I believe that the right way to achieve what I'm looking for is to move property initialization to the initialization method provided by Backbone views. So they are initialized

 var BrowserView = Backbone.View.extend({ initialize: function () { this.collections = []; } }); var FileBrowserView = BrowserView.extend({ initialize: function () { BrowserView.prototype.initialize.apply(this); this.collections.push({name: 'Example Collection' + Math.rand()}); } }); var FileBrowserInstance1 = new FileBrowserView; console.log(FileBrowserInstance1.collections); var FileBrowserInstance2 = new FileBrowserView; console.log(FileBrowserInstance2.collections); 

Come here for the violin http://jsfiddle.net/yssAT/2/

Answer 3

It’s hard to understand what your goal is.

but here is how I see it if you have an object of the form

 var myView = Backbone.View.extend({ foo: "bar" }); 

and you have the extension backbone.View ... then you have a new view object with all backbone.view and additional parameters that you give as parameters.

if you then go over and create a second view that extends your first one it will get everything from your first glance + it has additional functions

 var mySecondView = myView.extend({ foobar: " f00b@r " }); 

if you create an instance of the second view and register its foo property, it will still hold "bar" as the value

 var mySecondViewInstance = new mySecondView(); console.log("mySecondViewInstance.foo: ", mySecondViewInstance.foo); console.log("mySecondViewInstance.foobar: ", mySecondViewInstance.foobar); 

if i create a new instance of my first view and change foo to "changed-foo" log foo to mySecondViewInstance will still be "bar"

 var myViewInstance = new myView(); myViewInstance.foo = "changed-foo"; console.log("mySecondViewInstance.foo: ", mySecondViewInstance.foo); console.log("mySecondViewInstance.foobar: ", mySecondViewInstance.foobar); 

JS-Fiddle to play with it can be found here: http://jsfiddle.net/saelfaer/uNBSW/

Answer 4

Inheritance from Backbone.View does not work or is quite complex.

You must create a common object that will inherit your every representation, i.e.

 var ViewInterface = { events : { /* ... */ }, initialize : function (options) { /* ... */ }, otherFunction : function (options) { /* ... */ }, } 

each of your submissions will apply to this object:

 var BrowserView = Backbone.View.extend(_.extend(ViewInterface, { anotherFunction : function (options) { /* ... */ }, }) var AnotherView = Backbone.View.extend(_.extend(ViewInterface, { yetAnotherFunction : function (options) { /* ... */ }, })