Using the Backbone.js router to navigate through views modularized with require.js

backbone.jsrequirejs

I am separating my views and router into separate files with require. I then have a main.js file that instantiates the router, and also renders my default view.

My router has view ('View/:id') and edit ('Edit/:id') as routes. In main.js, when I instantiate the router, I can hardcode router.navigate('View/1', true) and the navigation works fine. In my view file, when I click on the edit link, I want to call router.navigate('View/' + id, true), but I'm not sure how I should do this.

I've had success calling Backbone.history.navigate('View/' + id, true), but I don't feel like I should be relying on the global Backbone object.

I tried passing ({ router: appRouter }) to my views so I could use this.options.router.navigate(), however that wasn't working for me.

In case you're curious, here's a bunch of code from my app:

Router:

define(['./View', './Edit'], function (View, Edit) {
    return Backbone.Router.extend({
        routes: {
            'View/:id': 'view',
            'Edit/:id': 'edit'
        },

        view: function (id) {
            var model = this.collection.get(id);
            var view = new View({ model: model });
            view.render();
        },

        edit: function (id) {
            var model = this.collection.get(id);
            var edit = new Edit({ model: model });
            edit.render();
        }
    });
});

View:

define(function () {
    return Backbone.View.extend({
        template: Handlebars.compile($('#template').html()),

        events: {
            'click .edit': 'edit'
        },

        render: function () {
            //Create and insert the cover letter view
            $(this.el).html(this.template(this.model.toJSON()));
            $('#View').html(this.el);

            return this;
        },

        edit: function () {
            Backbone.history.navigate('Edit/' + this.model.id, true); 
        },
    });
});

Best Answer

In case anyone else is looking for a solution to this problem like I was, I'm posting what I ended up doing. If you're using the boilerplate backbone.js, then you will have an initialize() function in router.js. I modified my initialize() function to look like the following:

initialize = function () {
  var app_router;
  app_router = new AppRouter();

  // Extend the View class to include a navigation method goTo
  Backbone.View.goTo = function (loc) {
    app_router.navigate(loc, true);
  };

  Backbone.history.start();
};

Due to backbone.js's particular flavour of inheritance, this allows allows me to call MyView.goTo(location); from within any of my views.

Related Topic