Skip to content
No description, website, or topics provided.
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Type Name Latest commit message Commit time
Failed to load latest commit information.


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();
You can’t perform that action at this time.