Global variable in a BackboneJS router using RequireJS

Question

I am using BackboneJS with RequireJS for an application I am building.

An App file initialises the Router:

// Define application router
var router = new AppRouter();
Backbone.history.start();

And then the Router takes control of the system actions.

var App = Backbone.Router.extend({

    routes: {

        "project/:id": "getProject",
        "projects": "getProjects",
        "*actions": "defaultRoute"
    },

    getProject: function (id) {
       // dashboard.set('some_key', 'some_value');
    },

    getProjects: function () {
       // dashboard.set('some_key', 'some_value');
    },

    defaultRoute: function () {
       // dashboard.set('some_key', 'some_value');
    }

});

I have added a Dashboard model and view that I use to display global information about the state of my system at any given time. (This will sit at the top of the window). Its view monitors its model for changing values and re-renders when necessary. This works fine.

I want to avoid having to re-write this ever after my initial object instantiation:

var dashboard = new DashboardModel();
var dashboardView = new DashboardView({ model: dashboard });
$('#dashboard-placeholder').html(dashboardView.render().el);

What I need though, is to be able to access this object anywhere (an instance of my Dashboard model). At the moment I initialise it in App but I can't access it in the Router if I do this. I don't really want to define it IN the router because that doesn't feel like the right task for the Router to perform.

How, and where do I define this instance of my Dashboard model?

Answer 1

What I need though, is to be able to access this object anywhere

What you are looking for is the singleton pattern:

Intent:

• Ensure that only one instance of a class is created.
• Provide a global point of access to the object.

Implementation:

• (...)The Singleton Pattern defines a getInstance operation which exposes the un ique instance which is accessed by the clients. getInstance() is is responsible for creating its class unique instance in case it is not created yet and to return that instance.

And this is how you could implement it:

define("DashboardModel", function () {
    var instance;

    var DashboardModel = Backbone.Model.extend({
        (...)
    });

    // Static method
    DashboardModel.getInstance = function () {
        // "instance" can be "this.instance" (static property) 
        // but it is better if it is private
        if (!instance) {
            instance = new DashboardModel();
        }
        return instance;
    };
});

Now each time you need the DashboardModel instance you only need to call:

var DashboardModel = require("DashboardModel"); //or from the define arguments
var dashboard = DashboardModel.getInstance();

Answer 2

Singleton is an obvious choice but I think you can also create an instance of your model in a new module definition.

define("MyX", "MyXModel", function(MyXModel){
    return new MyXModel();
});

Please see AMDjs api docs https://github.com/amdjs/amdjs-api/wiki/AMD#factory-