BACKBONE- ROUTERS

In the traditional MVC sense Routers don’t necessarily fit the semantics. Though a Backbone "router" is still very useful for any application/feature that needs URL routing/history capabilities. Backbone routers are used for routing your applications URL’s when using hash tags(#).

Defined routers should always contain at least one route and a function to map the particular route to. In the example below, we are going to define a route that is always called.

Optional Routes

Search route with query and optional page parameter is an optional route.

1var TodoRouter = new (Backbone.Router.extend({
2    routes: {
3        'search/:query': 'search',
4        'search/:query/p:page': 'search'
5    },
6    search: function(query, page) {
7        page = page || 0;
8        console.log(query);
9        console.log(page);
10    }
11}));

Results:

1TodoRouter.navigate('search/milk', {trigger: true});

This will print "milk", 0

1TodoRouter.navigate('search/milk/p2', {trigger: true});

This will print "milk", 2

Note the duplicate routes are highlighted. We can resolve this issue with an optional route:

1var TodoRouter = new (Backbone.Router.extend({
2    routes: {
3        'search/:query /p:page ': 'search',
4    },
5    search: function(query, page) {
6        page = page || 0;
7        console.log(query);
8        console.log(page);
9    }
10}));

What if we want to match ‘search/milk/p2/’?

1var TodoRouter = new (Backbone.Router.extend({
2    routes: {
3        'search/:query (/p:page)(/) ': 'search',
4    },
5    search: function(query, page) {
6        page = page || 0;
7        console.log(query);
8        console.log(page);
9    }
10}));

We can use an optional trailing slash (/)

URI with Spaces

What if the URI you provide has encoded spaces?

To doRouter.navigate('search/Hello%20World/p2', {trigger: true})

You will get the following result, which is not decoded:

"Hello%20World", 2

1var TodoRouter = new (Backbone.Router.extend({
2    routes: {
3        'search/:query (/p:page)(/) ': 'search',
4    },
5    search: function(query, page) {
6        page = page || 0;
7        query = decodeURIComponent(query);
8        console.log(query);
9        console.log(page);
10    }
11}));

The result will be decoded:

"Hello World", 2

Regex in Routes

Say we want to restrict parameter to numeric input, let's see how can achieve this:

1var TodoRouter = new (Backbone.Router.extend({
2    routes: {
3        'todos/:id': 'show'
4    },
5    show: function(id) {
6        console.log("id = " + id);
7    }
8}));

TodoRouter.navigate('todos/2', {trigger: true})

Result: id = 2

TodoRouter.navigate('todos/notanid', {trigger: true})

Result id = notanid

So this shouldn’t trigger show.

1var TodoRouter = new (Backbone.Router.extend({
2    show: function(id) {
3    console.log("id = " + id);
4}
5}));    
6
7TodoRouter.route(/^todos\/(\d+)$/, 'show');

Here each Regex Capture Group becomes a param.

1TodoRouter.navigate('todos/2', {trigger: true}) // id = 2`
2TodoRouter.navigate('todos/notanid', {trigger: true})

This doesn't trigger show.

1var TodoRouter = new (Backbone.Router.extend({
2    initialize: function(){
3        this.route(/^todos\/(\d+)$/, 'show');
4    },
5    show: function(id) {
6    console.log("id = " + id);
7}
8}));

This keeps routes inside the router.

Advanced Regex Routes

Let's examine this advanced route formation:

/^search\/(\w+)(?:\/p(\d+))?\/?$/ --> 'search/:query(/p:page)'

This router matches:

1'search/milk'
2'search/milk/p2'
3'search/milk/p2/'

But it doesn't match the following:

1'searches/milk'
2'search/milk/p2/p1'
3'search/milk/2'

Catch-all Routes

Alert user when no route matches:

1var TodoRouter = Backbone.Router.extend({
2    routes: {
3        '*path': 'notFound'
4    },
5        notFound: function(path) {
6        alert('Sorry! There is no content here.');
7    }
8});
9
10TodoRouter.navigate('nothinghere', {trigger: true})

This will result in:

File Path Route

Accept a file path and get its parts

1var TodoRouter = new (Backbone.Router.extend({
2    routes: {
3        'file/*path': 'file'
4    },
5    file: function(path) {
6        var parts = path.split("/");
7        console.log(parts);
8    }
9}));
10
11TodoRouter.navigate("file/this/is/a/file.txt", {trigger: true});

Result:

1[" this", "is", "a", "file.txt"]

If you want to learn about more follow my other articles on Backbone here:

• Backbone Models
• Backbone Customizing Collections
• Backbone Patterns
• RequireJS & Handlebars