all my Backbone.Views are only used once in their final state. (Except item views).

Currently I handle Backbone.Views as Singleton this way:

var Singletonizer = function(Singleton) {
    if (Singleton._instance) return Singleton._instance;

    Singleton._instance = new Singleton();

    Singletonizer(Singleton);
};

Unfortunately it isn't that nice to add this little function as dependency to each amd module in my repository.

Is there another way to handle this? Maybe overwriting the base view class?

all my Backbone.Views are only used once in their final state. (Except item views).

Currently I handle Backbone.Views as Singleton this way:

var Singletonizer = function(Singleton) {
    if (Singleton._instance) return Singleton._instance;

    Singleton._instance = new Singleton();

    Singletonizer(Singleton);
};

Unfortunately it isn't that nice to add this little function as dependency to each amd module in my repository.

Is there another way to handle this? Maybe overwriting the base view class?

• javascript
• backbone.js
• singleton
• amd

Share Improve this question Follow edited Aug 31, 2012 at 16:35 bodokaiser asked Aug 31, 2012 at 16:28 bodokaiserbodokaiser 15.8k2727 gold badges100100 silver badges143143 bronze badges 0

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 6

Just have your module return a function besides your view constructor, one that returns a single instance of it instead, not unlike the following. This way when you load the module you will not automatically get an instance whether you like it or not. Instead, after loading our "FailedXhrView" module, we then get our singleton by calling FailedXhrView()

'use strict';

define(['jquery', 
        'underscore', 
        'backbone', 
        'text!templates/failedXhr.html'], 

function($, _, Backbone, failedXhrTemplate) {
    var FailedXhrView = Backbone.View.extend({
        el : $('#failedxhr-modal-container'),
        template : _.template(failedXhrTemplate),

        render : function() {
            this.$el.html(this.template({}));
            this.$el.find('failedxhr-modal-containee').modal();
            return this;
        }
    });

    var instance;

    return function() {
        if (!instance) {
            instance = new FailedXhrView();
        }
        return instance;
    }
});

From the very remendable book Recipes with Backbone:

From here:

// definition
MyApplication.Views.List = Backbone.View.extend();

// instantiation
$(function() {
  MyApplication.ListView = new MyApplication.Views.List({
    el: $('#list')
  }); 
})

To here:

$(function() {
  MyApplication.ListView = new (Backbone.View.extend({
    initialize: function() {
      // ...
    }
  }))({el: $('#list')})
});

We assign an instantiation of an anonymous class to MyApplication.ListView. In this approach, we are doing the typical extension of a top-level Backbone class with custom attributes and methods. The difference, however, is that we do not assign the result to a class name as we did earlier. Instead, we immediately create a new instance of this anonymous class. Lastly, MyApplication.ListView is assigned to the resulting object.

I have to say I've never used techniques like this. It looks to messy for me, I prefer legibility than architecture.