Backbone.js Router

by oceog

HTML

<script src="http://documentcloud.github.com/underscore/underscore-min.js"></script>
<script src="http://documentcloud.github.com/backbone/backbone-min.js"></script>
<a href='#/items/42'>Item 42</a>
<br>
    <a href='#//'>Item /</a>
<br>
    <a href='#'>Item root</a>
    <div id="content"></div>

CSS

.f42 {
    font-size: 42px;
}

JavaScript

var Router = Backbone.Router.extend({
    routes: {
        'items/:id': 'itemDetails',
            '': 'root',
            '/': '/'
    },

    itemDetails: function (id) {
        console.log('id: %o', id);
        $('#content').empty().append($('<div>').addClass('f42').text(42));
    },
    root: function () {
        console.log('root');
        $('#content').text('root');
    },
    '/': function () {
        console.log('/');
        $('#content').text('/ here!');
    }
});

var router = new Router();
Backbone.history.start();