ruk·si

🦴 Backbone
Single Page App

Updated at 2013-11-16 12:06

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);
});