No description, website, or topics provided.
Switch branches/tags
Nothing to show
Clone or download
Latest commit 946a856 Feb 12, 2013
Failed to load latest commit information. It works. Confirmed. Feb 12, 2013
viewmanager.js It's working now Feb 12, 2013


A simple little module for managing Backbone views, birthed in a JSFiddle. An even simpler version without region support is available here if you're interested in seeing how this evolved.

This point is to be a small, lightweight library to help people learn.


You're given a new Backbone.ViewManager which does all the cool stuff. And a Backbone.ViewManager.BaseView for you to extend from. See a demo of the below code in action.

var app = = { views: {} };

// these views inherit the render() method from the base
// so you only need to write that function if it does something special
app.views.pageOne = Backbone.ViewManager.BaseView.extend({
    template: '#pageOne',

    initialize: function() {
        // set some data which will be passed to the template
        // you could add your model or collection here
        // NOTE: the base view's render() method is only good
        // for the simplest of views, write your own on a view
        // if you have more advanced needs
        this.templateData.person = {
            name: 'Dan Harper'

app.views.pageTwo = Backbone.ViewManager.BaseView.extend({
    template: '#pageTwo',

    unsetView: function() {
        // this method is run just before the view is removed,
        // you may want to turn off any bindings here..
        console.log('pageTwo custom unsetView');

app.views.sidebarOne = Backbone.ViewManager.BaseView.extend({
    template: '#sidebarOne'

app.views.sidebarTwo = Backbone.ViewManager.BaseView.extend({
    template: '#sidebarTwo'

app.router = Backbone.Router.extend({
    routes: {
        '': 'pageOne',
        'foo': 'pageTwo'

    initialize: function() {
        // register the regions
        Backbone.ViewManager.Core.addRegion('panel', '#panel');
        Backbone.ViewManager.Core.addRegion('sidebar', '#sidebar');

    pageOne: function() {
        // render our views!
        Backbone.ViewManager.Core.swap('panel', new app.views.pageOne());
        Backbone.ViewManager.Core.swap('sidebar', new app.views.sidebarOne());

    pageTwo: function() {
        Backbone.ViewManager.Core.swap('panel', new app.views.pageTwo());
        Backbone.ViewManager.Core.swap('sidebar', new app.views.sidebarTwo());

new app.router();