Question

I am currently looking at Backbone as a way to organise our javascript files and create a clean structure for our code.

My question is mainly a “Best Practice” question.

The library works great and I have successfully setup my structure with AMD and requirejs. My question relates to a couple of utility files that I am running. One gets data from an XML document and converts it to a json data object (so data can be localised). The other is a utility that loads and connects to Facebook. I have created both of these as ‘Models’.

Arguably these models should probably be “Controllers” as they connect to services but these need to be called without the need to browse to a hashbang in a router (or controller) file.

Should I be extending backbones model for these two utility files or is there something else I should be doing to implement utility files like this ?

Answer 1

There’s nothing objectively wrong with using Backbone.Models for this purpose, but regardless it feels fishy. Model comes with extra baggage which doesn’t belong in a “service” or “utility” type class.

Instead I’ve defined a more generic, evented base class for functionality that doesn’t quite fit the Backbone Model-View-Collection-Router paradigm.

define(['backbone', 'underscore'], function(Backbone, _) {

  var Class = function() {
    this.initialize.apply(this, arguments);
  };

  //give Class events and a default constructor
  _.extend(Class.prototype, Backbone.Events, {initialize: function() {}});

  //copy the extend feature from one of the backbone classes
  Class.extend = Backbone.Model.extend;

  return Class;
});

The class behaves like other Backbone objects, in that it can be extended, its instances have a initialize constructor method and they support events. One of your examples, the localization service, could look something like:

var LocalizationService = Class.extend({
  initialize: function(url) {
    this.url = url;
    this.fetch();
  },

  fetch: function({
    var self = this;
    $.ajax({
      url:this.url,
      success: function(response) {
        self.response = response;
        self.trigger('fetch:complete', self, response);
        //etc...
      }
    });
  }
});