Question

I have a project that involves three frontend developers. We’re going to use backbone or ember.js, but I have a concern.

I’ve been using backbone with global variable likes the following line.

Window.mymodel = Backbone.Model.extend({});

since we are working as a team, I don’t think that’s the best way. In addition, backbone or ember.js do not provide an event system (publish or subscribe patterns..).

What would be the best practice in this case? or How did you manage to work in a project like this?

Answer 1

I recommend using either the nested namespacing pattern like this:

var App =  App || {};
App.Model = App.Model || {};

App.Model.MyModel = Backbone.Model.extend({});

(see https://github.com/addyosmani/backbone-fundamentals#namespacing for a good write up on this and more)

or using an AMD loader like require.js

define(['Backbone'], 
    function ( Backbone ) {

    MyModel = Backbone.Model.extend({});

    return MyModel ;
});

...

require('MyModel', function(MyModel) {
   var myModel = new MyModel();
});

For events with Backbone you could piggy back on Backbone.Events

// Declare globally or pass around
var app = _.extend({}, Backbone.Events);

// Trigger an event
app.trigger("myEvent", model);

// Catch an event
app.bind("myEvent", function(model) {
});