Backbone.Controller

Controller for Backbone MV*

Keep controller logic separated, split your routes to controllers.

Usage

DEMO: Just Test It

Usage examples:

Basic

var Controller = Backbone.Controller.extend({
  initialize: function() {
    // do init stuff
  },
 
  search: function(query, page) {
    // create search model and view
  }
}); 
 
var searchController = new Controller();

Controller supports default Backbone events

var Controller = Backbone.Controller.extend({
  initialize: function() {
    this.model = new Backbone.Model();
    this.listenTo(this.model, 'add', this._onAdd);
  },
 
  _onAdd: function(model) {
    // show notification view
  }
}); 
 
var catsController = new Controller();

Controller has remove method for cleanup

Remove method should do correct remove for all controller views and models, stop listening controller events and clear state.

var Controller = Backbone.Controller.extend({
  initialize: function() {
    this.model = new Backbone.Model();
    this.listenTo(this.model, 'add', this._onAdd);
  },
 
  _onAdd: function(model) {
    // show notification view
  }
}); 
 
var catsController = new Controller();
//...
catsController.remove();

Also remove method is calling automatically when user goes from one controller to another. See routing section for details.

Controller supports declarative routes definition.

It's little more complex than previous examples but can be used to keep all routes separately which is good idea for any size app.

var CatsController = Backbone.Controller.extend({
  routes: {
    'cats': 'list',
    'cats/:id': 'showCat'
  },
 
  initialize: function() {
    // do some init stuff
  },
 
  list: function() {
    // show cats list
  },
 
  showCat: function(catId) {
    // show cat view
  }
});
 
var DogsController = Backbone.Controller.extend({
  routes: {
    '': 'list',
    'dogs': 'list',
    'dogs/:id': 'showDog'
  },
 
  initialize: function() {
    // do some init stuff
  },
 
  list: function() {
    // show dogs list
  },
 
  showDog: function(catId) {
    // show cat view
  },
 
  remove: functin() {
    // cleanup
  }
});
 
var Application = Backbone.Router.extend({
  controllers: {},
 
  initialize: function() {
    this.controllers.cats = new CatsController({router: this});
    this.controllers.dogs = new DogsController({router: this});
 
    Backbone.history.start();
  }
});

The main idea - pass {router: routerInstance} as controller option. This allows to define controller specific routes in separated controllers.

When url changes from #dogs / #dogs/:id to any route which defined in another controller, remove method is calling automatically.

This case controller should clear state, remove controller specific views and models.

Controller can automatically add router without creating Backbone.Router instance

var CatsController = Backbone.Controller.extend({
  routes: {
    'cats': 'list',
    'cats/:id': 'showCat'
  },
 
  initialize: function() {
    // do some init stuff
  },
 
  list: function() {
    // show cats list
  },
 
  showCat: function(catId) {
    // show cat view
  }
});
 
var DogsController = Backbone.Controller.extend({
  routes: {
    '': 'list',
    'dogs': 'list',
    'dogs/:id': 'showDog'
  },
 
  initialize: function() {
    // do some init stuff
  },
 
  list: function() {
    // show dogs list
  },
 
  showDog: function(catId) {
    // show cat view
  }
});
 
var cats = new CatsController({router: true});
var dogs = new DogsController({router: true});

Before / after routing

Controller automatically calls onBeforeRoute / onAfterRoute functions when processing routes.

var DogsController = Backbone.Controller.extend({
  routes: {
    '': 'list',
    'dogs': 'list'
  },
 
  initialize: function() {
    // do some init stuff
  },
 
  onBeforeRoute: function(url, param1, param2, ...) {
    // called before `#dogs` / `#` routes
    // Set some state variables, create controller layout etc
  },
 
  onAfterRoute: function(url, param1, param2, ...) {
    // called after `#dogs` / `#` routes
  },
 
  list: function() {
    // show dogs list
  }
});
 
var dogs = new DogsController({router: true});
 
 
//Cancel route
var DogsController = Backbone.Controller.extend({
  routes: {
    'dogs': 'list',
    'dogs/:id': 'showDog'
  },
 
  initialize: function() {
    // do some init stuff
  },
 
  list: function() {
    // show dogs list
  },
 
  showDog: function(catId) {
    // show cat view
  },
  onBeforeRoute : function(url) {
    console.log('before route');
    var deferred = Q.defer();
 
    setTimeout(function() {
      deferred.resolve('ggg');
    }, 2000);
 
    return deferred.promise;
    //return false;
  },
  onAfterRoute : function() {
    console.log('afterRoute');
  }
});
 
var dogs = new DogsController({router : true});
Backbone.history.start();

Redirecting to another route

If declarative routing has been used in project, you don't have access directly to Router instance. Backbone Controller provides Controller.navigate method as proxy for Backbone.Router.navigate method.

var DogsController = Backbone.Controller.extend({
  routes: {
    'dogs': 'list'
  },
 
  list: function() {
    // show dogs list
    // if something
    this.navigate('cats/', {trigger: true});
  }
});
 
var dogs = new DogsController({router: true});

Dependencies loading

Require.js AMD

requirejs.config({
  baseUrl: 'static/',
  urlArgs: 'bust=' +  Date.now(),
  paths: {
    jquery: 'assets/js/jquery',
    underscore: 'assets/js/underscore',
    backbone: 'assets/js/backbone',
    controller: 'assets/js/backbone.controller'
  },
 
  shim: {
    backbone: {
      deps: ['underscore', 'jquery'],
      exports: 'Backbone'
    },
    controller: {
      deps: ['underscore', 'backbone']
    },
    app: ['controller']
  }
});

CommonJS

var Controller = require('controller');
// or require Backbone, both fine
 
var HomeController = Controller.extend({
  ...
});

Old style

<script src="assets/js/jquery.js" />
<script src="assets/js/underscore.js" />
<script src="assets/js/backbone.js" />
<script src="assets/js/backbone.controller.js" />

Bower

bower install backbone.controller