Post
Ask Question

Routers in Backbone.JS: Part 7

Before reading this article, I would like to recommend you go through my previous articles on this series of Backbone.js.

Routers in Backbone

Backbone.Router enables an application with URL routing and history capabilities. It enriches something with the methods for routing of the web applications with permalinks (linkable, bookmarkable and shareable URLs) of locations in the app and connects them to the actions and events.

To make bookmarkable code, it is necessary to call Backbone.history.start() or Backbone.history.start({pushState: true}) after the application has finished creating all of the routers.

extend

Backbone.Router.extend(properties, [classProperties])

A Router can be defined by extending the Backbone.Router class, is similar to what we did with other modules of Backbone in the previous articles of this series. When we are extending Backbone.Router we are actually creating a new constructor that inherits from the Backbone.Router.

var routers = Backbone.Router.extend({  // Creating a Backbone Router  
    // routes and functions here  
});

example

var routers = Backbone.Router.extend({
    routes: {
        "": "Route1",
        "Route2": "Route2"
    },
    Route1: function () {
        //-----------
    },
    Route2: function () {
        //------------
    }
});

In the preceding example, we added properties into the extend method, namely Route1 and Route2. These properties are actually the routes that we want to map. In this case, when Route1 is requested, it will map to Route1, when Route2 is requested Route2 will map.

When building an application all we need to know is the pattern to follow. First, we extend the Backbone.Router class, then we an object to the extend method. We will provide properties like routes in the object, by which it maps to methods.

constructor / initialize

new Router([options])

The constructor will be called during Router instantiation.

var route = new routers(); // instantiation

navigate

router.navigate(fragment, [options])

If we want to save our application as a URL, we call navigate to update.

openPage: function(pageNumber) {  
    this.document.pages.at(pageNumber).open();  
    this.navigate("page/" + pageNumber);  
}

We can also call the route function by setting the trigger option to true.

app.navigate("help/troubleshooting", { trigger: true });

If we wish to update the URL without creating an entry into the browser's history, we do it by setting the replace option to true.

app.navigate("help/troubleshooting", { 
    trigger: true, 
    replace: true 
});

execute

router.execute(callback, args);

router.execute(callback, args) is called internally within the router, its corresponding callback is executed whenever a route is matched. We can also do custom parsing of our routes by overriding the method. For example.

var Router = Backbone.Router.extend({
    execute: function(callback, args) {
        args.push(parseQueryString(args.pop()));
        if (callback) callback.apply(this, args);
    }
});
  • Router Parameter: A Router parameter provides information about certain routes. We use a router parameter, we append a slash followed by colons and a parameter's name. A parameter's name will be available to the function pointed to by the router. 
    route: "view/:id"
  • Optional Parameter: Backbone.Router also allows us to ask for an optional parameter in the route, this can be done by simply surrounding it in parenthesis (/: optional parameter). 
    routes: {  
    'category/:name(/:page)': 'showCategory'  
}

Dynamic RoutingIf we want to retrieve a post with a variable id and also we we want the URL string to be quite friendly, many of the frameworks allow us to do so. Suppose we have a URL string like abc.xyz/#/view/9 and we want to retrieve the id in the string. This can be done as in the following.

var AppRouter = Backbone.Router.extend({
    routes: {
        "view/:id": "getview",
        "*actions": "defaultRoute"
    }
});
// Instantiate the router
var viewrouter = new AppRouter;
viewrouter.on('route:getview', function (id) {
    alert("Get view number " + id);
});
app_router.on('route:defaultRoute', function (actions) {
    alert(actions);
});
Backbone.history.start();

Backbone uses params and *splats.

": params" match any URL components between slashes whereas "*splats" match any number of components, that is always the last variable in our URL.

routes: {
    'folder/*path': 'download', // splats
    '*default': 'default'
}

Summary

We got an overview of Backbone.Router with various methods and parameters.

That's it, folks!


Similar Articles