The problem with passing in your routes when you create a Router
is that you have to supply all the routing functions together with your routes, which (especially if you have a lot of routes on your site) can easily become messy. Instead, many Backbone programmers define their routes on the Router
class itself, as shown here:
var SiteRouter = Backbone.Router.extend({ routes: { 'foo': 'fooRoute' }, fooRoute: function() { // logic for the "/foo" or "#foo" route would go here } }); var siteRouter = new SiteRouter(); Backbone.History.start(); // siteRouter won't work without this
As you can see, this approach simplifies the routes' definition and makes them more similar to the events
properties of Models
and Collections
. Instead of defining routing methods with the routes themselves, you can simply give the route the name of a routing method and Backbone will look for that method inside the Router
class.
There is also a third way to add routes and that is by using Backbone's route
method. This method takes the route
as the first argument, the route's name as the second argument, and the route's handler as the third argument. If the third argument is omitted, Backbone will look for a method on the Router
with the same name as the route
itself:
For example:SiteRouter = new Backbone.Router({ initialize: function() { this.route('foo', 'fooRoute'), }, fooRoute: function() { // logic for the "/foo" or "#foo" route would go here} });
Just as the on
method of Models
and Collections
lets you create event bindings after an instance of the class is created, the route
method of Routers
allows you to define a new route at any time. This means that you can dynamically create all your routes on the fly after the Router
class is created. However, just as you would normally want all the pages of your site to be available to your user when they first visit it, you will generally want all your routes to be available too, which means that you will usually create them in your Routers initialize
method.
The main advantage of using the route
method is that you can apply logic to your routes. For instance, let's say you have several routes on your site that are only for administrators. If your t
can check an isAdmin
attribute of a user Model
, then it can use this attribute to dynamically add or remove these administrator-only routes when the Router
class is initialized, as shown here:
// NOTE: In a real case user data would come from the server var user = new Backbone.Model({isAdmin: true});SiteRouter = new Backbone.Router({ initialize: function(options) { if(user.get('isAdmin')) { this.addAdminRoutes(); } }, addAdminRoutes: function() { this.route('adminPage1', 'adminPage1Route'), this.route('adminPage2', 'adminPage2Route'), // etc. } });
As you can see in the preceding example, another advantage of using the route
method is that you can organize groups of routes into separate functions. This can be useful if you want to turn certain groups of routes on or off together, but it can also be useful simply to organize constant routes. In fact, you can even define some of your routes in an entirely different file as long as your Router
has access to them, as shown here:
// File #1 window.addFooRoutes = function(router) { router.route('foo', function() { //... }) } // File #2SiteRouter = new Backbone.Router({ initialize: function(options) { if(options.includeFooRoutes) { addFooRoutes(this); } } });
3.15.226.79