Scalable Routing With Backbone

To scale up larger applications that rely on Backbone routing mechanisms, you can't rely on a single router instance. You need modular routers that are fit for a particular purpose.

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/lodash.js/2.4.1/lodash.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/backbone.js/1.1.0/backbone-min.js"></script>
<template id="template-main">
    <div><a href="#users">Users</a></div>
    <div><a href="#products">Products</a></div>
</template>

<template id="template-users">
    <h3>Users</h3>
    <ul></ul>
</template>

<template id="template-products">
    <h3>Products</h3>
    <ul></ul>
</template>

<div id="main"></div>

CSS

body {
    font: 0.8em Arial, Helvetica, sans-serif;
}

JavaScript

(function() {

    // The application "workspace" router. This router is container for all
    // collections used. In this case only two because it's an example. It also
    // only defines the default route - the homepage.    
    var ws = new (Backbone.Router.extend({
        
        routes: {
            "*path": "routeDefault"    
        },
        
        initialize: function() {
        
            // A dummy user collection.
            this.users = new Backbone.Collection([
                { name: "User 1" },
                { name: "User 2" },
                { name: "User 3" },
                { name: "User 4" },
                { name: "User 5" },
                { name: "User 6" },
                { name: "User 7" },
                { name: "User 8" },
                { name: "User 9" },
                { name: "User 10" },
                { name: "User 11" },
                { name: "User 12" },
                { name: "User 13" },
                { name: "User 14" },
                { name: "User 15" },
                { name: "User 16" },
                { name: "User 17" },
                { name: "User 18" },
                { name: "User 19" },
                { name: "User 20" },
                { name: "User 21" },
                { name: "User 22" },
                { name: "User 23" },
                { name: "User 24" },
                { name: "User 25" },
                { name: "User 26" },
                { name: "User 27" },
                { name: "User 28" },
                { name: "User 29" },
                { name: "User 30" },
                { name: "User 31" },
                { name: "User 32" },
                { name: "User 33" },
                { name: "User 34" },
                { name: "User 35" },
                { name: "User 36" },
                { name: "User 37" },
                { name: "User 38" },
                { name: "User 39" },
                { name: "User 40" },
                { name: "User 41"...