StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>@Nupul is exactly right: you're not subclassing your <code>GenericView</code>.</p> <p>In fact, subclassing isn't really the right word here, since JavaScript doesn't do classical inheritance.</p> <p>So let's first try and understand what's happening here:</p> <pre><code>var GenericView = Backbone.View.extend( propertiesObj, classPropertiesObj ) </code></pre> <p><code>Backbone.View</code> is a constructor function, that when called with the <code>new</code> keyword, creates a new object for you.</p> <p>Since this is JS, all function are really function objects, so <code>Backbone.View.extend</code> is just a function hanging off <code>Backbone.View</code> that does a few things:</p> <ol> <li>It sets up the prototype chain, so you can access properties and call functions defined in the 'base' class</li> <li>It creates and returns a new constructor function you can call (which here would be <code>GenericView</code>) to instantiate objects of your inheriting class</li> <li>It copies itself to be a function hanging off the constructor function it returns so that you can further inherit.</li> </ol> <p>So the correct way to set up the protoype chain you want is:</p> <pre><code>var ImplementedView = GenericView.extend({ // implementation goes here }); </code></pre> <p>and NOT:</p> <pre><code>var ImplementedView = new GenericView({//stuff}); </code></pre> <p>because this just creates a new instance of a GenericView.</p> <p>Now, you still have a problem, because when you do something like:</p> <pre><code>var impl_view = new ImplementedView; impl_view.events; // This isn't merged with the events you created // for the GenericView </code></pre> <p>At this point there are different ways to get the result you want, here's one that uses <code>delegateEvents</code> kind of like how you did. Using it isn't bad, incidentally.</p> <pre><code>var GenericView = Backbone.View.extend({ genericEvents: { 'click .close': 'close' }, close: function() { console.log('closing view...'); } }); var ImplView = GenericView.extend({ events: { 'click .submit': 'submit' }, initialize: function(options) { // done like this so that genericEvents don't overwrite any events // we've defined here (in case they share the same key) this.events = _.extend({}, this.genericEvents, this.events); this.delegateEvents() } }); </code></pre>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload