Backbone -

Single Page App

You can specify page wide rebinding of links with Backbone. Views are usually used to encapsulate application or module initialization and interaction between multiple views, models and collections.

<ul>
    <li><a href="/completed" data-internal="true">Show Completed</a></li>
    <li><a href="/support">Support</a></li>
</ul>

var app = new (Backbone.View.extend({

    template: _.template(
        '<h1>ToDo List</h1><div id="app"></div>'
    )

    events: {
        'click a[data-internal]': function(e) {
            e.preventDefault();
            Backbone.history.navigate(e.target.pathname, {trigger: true});
        }
    },

    start: function(initialData) {
        var todos = new App.Collections.TodoItems(initialData.todos);
        var todosView = new App.Views.TodoItems({collection: todos});
        this.$el.append(todosView.render().el);
        Backbone.history.start({pushState: true});
    },

    render: function() {
        this.$el.html( this.template() );
    }

}))({el: document.body});

var initialData = GET_INITIAL_DATA_FROM_HTML;

$(function() {
    app.render();
    app.start(initialData);
});