Backbone Marionette: put methods on instance/constructor or prototype when extending objects

Question

I have to make a backbone+marionette webapp from scratch, which I've never done, and I'm struggling with the basic code structure.

I understand the JavaScript concept of having methods on the constructor (recreated for each instance) or the prototype (shared between instances).

However I'm struggling to figure out how this translates into the simplest syntax to do the job when extending backbone models and marionette views.

This post seems to explain my problem in detail however the syntax they end up with to extend views is quite complex, and the reason I decided to use Marionette on top of Backbone is to abstract out such structural code and take advantage of their more advanced view types:

http://blog.scottlogic.com/2012/12/14/view-inheritance-in-backbone.html

The marionette 'options' seem to be a way to attach properties to the instance or the prototype but I'm unsure how to use them in an example:

http://marionettejs.com/docs/v2.4.5/marionette.functions.html#marionettemergeoptions

So let's say I want to build a CaseView that extends from Marionette CompositeView and has a learnerCompleted method. I want the learnerCompleted method to go on my CaseView prototype because I don't want the method recreated for each of my 600 instances of case view. However I don't want the learnerCompleted method to go on the Marionette CompositeView prototype because I have another view type CategoryView that also extends from Marionette CompositeView but doesn't need the learnerCompleted method.

What would be the simplest syntax to achieve this by leveraging in-built Marionette functionalities? I think the scottlogic blog post offers a solution but the syntax is complex and I'm wondering whether there is a simpler way to achieve the same using built-in Marionette utilities.

Many thanks in advance for your help!

lucasjackson lucasjackson · Accepted Answer · 2016-05-26T01:33:39

You can accomplish this by extending Marionette's CompositeView and specifying the learnerCompleted function.

var CaseView = Backbone.Marionette.CompositeView.extend({
  learnerCompleted: function() {
    /* ... */
  }
});

var CategoryView = Backbone.Marionette.CompositeView.extend({
});

With the above, the learnerCompleted function is put on the CaseView prototype, NOT Marionette's CompositeView. Therefore, the learnerCompleted function is not defined for your CategoryView.

I created a simple fiddle showing this: https://jsfiddle.net/jdrap2yk/

Backbone Marionette: put methods on instance/constructor or prototype when extending objects

1 Answers