Trouble pulling in Backbone router with Browserify

Question

I’m trying to learn Backbone with Browserify and am having the hardest time trying to figure out how to pull in router.navigate. But I think it has less to do with Backbone routes and more to do with my lack of knowledge on how to work with modules in Browserify (or just constructors!).

I have a simple “shoutbox” form. On submit, the fields get saved to the model on the server, which is working. The problem is when I try to redirect to a different page.

I’m using this line…

router.navigate('/shouts', {trigger: true});

And I get this error…

Uncaught TypeError: undefined is not a function

I’ve tried two different ways with the router.

EXAMPLE 1

main.js

var Router = require('./router');
var router = new Router();

router.js

module.exports = Backbone.Router.extend({

shouts.js

var router = require('../router');
...
router.navigate('/shouts', {trigger: true});

EXAMPLE 2

main.js

var router = require('./router');
// var router = new Router();

router.js

module.exports = new Backbone.Router.extend({

shouts.js

var router = require('../router');
...
router.navigate('/shouts', {trigger: true});

1 First I tried exporting just the router constructor. And then in main.js, I created a ‘new’ router. And this was working just fine, since all of my routing at that point was simple. But then I needed a redirect in ShoutEditView. And I guess it needs access to that router instance? I tried requiring router.js at the top of the ShoutEditView file and creating a new instance of the router, but that didn’t seem right. I should be using the same instance I already created I figure. And anyway, I still got the same error anyway.

2 So then I tried exporting the router in router.js with ‘new’ in front of it. So then I could just require it without creating a new instance. But that doesn’t seem to work either.

I’m thinking, I need to create an instance of the router somewhere and then pass it to the ShoutEditView somehow?

router.js

'use strict';

var $ = require('jquery');
var Backbone = require('backbone');
Backbone.$ = $;

var homeController = require('./controllers/home');
var shoutsController = require('./controllers/shouts');

module.exports = Backbone.Router.extend({

  routes: {
    'home': homeController.home,
    'shouts': shoutsController.index,
    'shouts/new': shoutsController.new,
    'shouts/:id': shoutsController.show,
    'shouts/:id/edit': shoutsController.edit,
  }

});

main.js

'use strict';

var $ = require('jquery');
var Backbone = require('backbone');
Backbone.$ = $;

var router = require('./router');
//var router = new Router();

$('body').on('click', '.back-button', function (event) {
    event.preventDefault();
    window.history.back();
});

Backbone.history.start();

shoutEditView

var ShoutEditView = new Backbone.View.extend({
  el: '#app',
  events: {'submit': 'save'},
  initialize: function () {
      this.render();
  },
  render: function () {
    var template = require('../templates/shouts/new.html');
    this.$el.html(template());
  },
  save: function(e) {
    e.preventDefault();
    var data = $('#foo').serializeObject();
    var shout = new Shout();
    shout.save(data, {
        success: function (shout) {
            console.log(shout.toJSON());
            console.dir(router);
            router.navigate('/shouts', {trigger: true});
        }
    });
  }
});

Answer 1

Singleton pattern should help

'use strict';

var $ = require('jquery');
var Backbone = require('backbone');
Backbone.$ = $;

var homeController = require('./controllers/home');
var shoutsController = require('./controllers/shouts');

var Router = Backbone.Router.extend({

  routes: {
    'home': homeController.home,
    'shouts': shoutsController.index,
    'shouts/new': shoutsController.new,
    'shouts/:id': shoutsController.show,
    'shouts/:id/edit': shoutsController.edit,
  }

});


var _instance;

var SingletonRouter = function() {
    if (_instance === undefined) {
        _instance = new Router();
    }
    return _instance;
};

module.exports = new SingletonRouter();

Then

var router = require('router');
...
router.navigate('/shouts', {trigger: true});