Introduction to Backbone.js Part 3: Routers – Video Tutorial

Backbone.js Routers Video TutorialWe're on to part 3 in the Backbone.js video tutorials series. This week we feature another important piece of the Backbone puzzle: Routers. You could conceivably create your JavaScript apps without Routers, but the ingenious technique behind routers allows your users to bookmark the app at a particular state or even use the back and forward buttons to traverse through the history of your applications state. Watch the video to learn more!

Backbone.js Video Tutorial Series

Final JavaScript Code

var Router = Backbone.Router.extend({
    routes: {          
        "foo/:bar" : "paramtest",
        "*action" : "func" 
    },
    func: function (action) {
        console.log(action);
    },
    paramtest:function (p) {
        console.log(p);
    }
});

new Router();

Backbone.history.start();

Conclusion

As stated in the video, I'm sorry for the delay. At least you'll be seeing two videos this week, though! On Thursday (at least I hope it's on Thursday) Part 4: Collections should be released. Also, contrary to the itinerary I gave in part 2, I've decided to do one more tutorial before taking a break and then starting up the app. Part 5 will contain a tutorial on using AJAX to populate your models. I won't say whether this comes out next Monday or Thursday, so you'll just have to wait and find out. In the meantime, keep studying up on the parts 1 through 3 until you feel confident (which shouldn't take too long).

Backbone.js Video Tutorial Series

About the Author

Author: Joe Zim

Joe Zim

Joe Zimmerman has been doing web development ever since he found an HTML book on his dad's shelf when he was 12. Since then, JavaScript has grown in popularity and he has become passionate about it. He also loves to teach others though his blog and other popular blogs. When he's not writing code, he's spending time with his wife and children and leading them in God's Word.


  • Ruf Dymond

    Hi Joe. I just finished this tutorials but had some problems .. again. The errors didn’t give a clue as why it was having problems. It just said “cannot extend undefined”, or words to that effect.

    At first I thought it was the versions of “backbone.js” and “underscore.js” that I was using:

    http://cdnjs.cloudflare.com/ajax/libs/backbone.js/0.9.2/backbone-min.js
    http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.3.3/underscore-min.js

    As you can tell, I got them from “cdnjs.com”. However, when I check the versions on the files in your tutorial, I found them to be the same. THEN I noticed the order in which they were listed was different. After I swapped them, the tutorial worked! I still think JavaScript isn’t very developer friendly.

    Just thought I’d share my woes in case anyone else experienced this.

    Very good tutorials. Nice and short and easy to follow!

    • http://www.joezimjs.com Joe Zimmerman

      “Cannot extend Undefined” just tells you that you are trying to add a property to an object that doesn’t exist. The error should come with a line number and file name, which will lead you to where the problem is happening. This may or may not help you depending on how well you know JavaScript and the libraries you’re using.

      Once again, if you don’t know that Backbone is dependent on Underscore, you’re not going to know to import them in the correct order. JavaScript’s developer-friendliness is highly dependent on your knowledge of how it works, which is largely true of any programming language. I agree that it could be more developer friendly in many ways, but you get used to it if you stick with it long enough.

      Thanks for sharing your experience. Sorry if you take this comment as an argument. I just wanted to try to help you out a bit more.

  • http://anjanesh.com Anjanesh Lekshminarayanan

    Why doens’t anonymous function work ?

    routes :
    {
    “foo/:bar” : function (p) { console.log(p); } ,
    “*action” : “foo”
    },

    • http://www.joezimjs.com Joe Zimmerman

      Backbone.js is a framework for helping you organize your code. Using an anonymous function for something like this is just bad practice, so the creators of Backbone left it out. If you would like to use an anonymous function, you can use the route function: http://backbonejs.org/#Router-route. There’s just no good reason to use anonymous functions in your example above, nor is there a good reason to use the route function if you can do it within the routes property.

  • http://www.facebook.com/zimmer.joerg Jörg Zimmer

    Hi Joe, again thanks for the tutorial. For links being clicked would you recommend to always prefer routers instead of event listeners? Routers should perform much better? What are their disadvantages compared to events?

    • http://www.joezimjs.com Joe Zimmerman

      It has nothing to do with whether it is a link or some other element. You use a Router when you wish to set a breakpoint that can be used with the Back button to be able to back in history to the same application “state”. You use the view’s event handlers when you want to react to user input without actually setting that breakpoint. The Router just allows you to use the URL to show different “pages” of the app (even though it’s all a single page application).

      If you want to change from showing a listing of all of the models to showing a single model, use the Router. If you just want to update some data on a page, just use events.