Backbone View Manager with Regions

Example of a simple Backbone View Manager using Regions

by Nirvanachain

HTML

<script src="http://underscorejs.org/underscore-min.js"></script>
<script src="http://backbonejs.org/backbone-min.js"></script>
<!doctype html>

<h1>Backbone View Manager</h1>

<nav><a href="#">Home</a> | <a href="#foo">Page Two</a></nav>

<section>
    <div id="panel">
        <p>Application Loading...</p>
    </div>

    <aside id="sidebar">
        <p>lol</p>
    </aside>
</section>

<footer>
    <p><small><a href="http://twitter.com/danharper7">by Dan Harper</a></small></p>
</footer>

<script type="template" id="pageOne">
    <p>Hi there, from <%= person.name %></p>
</script>

<script type="template" id="pageTwo">
    <p>The second page</p>
</script>

<script type="template" id="sidebarOne">
    <p>A SIDEBAR!</p>
</script>

<script type="template" id="sidebarTwo">
    <p>A different one</p>
</script>

CSS

* { box-sizing: border-box; }

body {
    font-family: sans-serif;
    margin: 20px;
}

a {
    color: #5285B0;
}

h1 {
    font-size: 1.4em;
}

nav {
    margin: 20px 0;
}

footer {
    margin-top: 20px;
}

footer a {
    color: #999;
    text-decoration: none;
}

footer a:hover {
    color: #777;
    text-decoration: underline;
}

section {
    overflow: hidden;
}

#panel {
    background: #eee;
    float: left;
    width: 70%;
    padding: 10px;
}

#sidebar {
    background: #e0e0e0;
    border-left: 1px solid #bbb;
    float: right;
    width: 30%;
    padding: 10px;
}

JavaScript

var app = {
    views: {},
    utils: {}
};

// --------------------------------------
//
// FRAMEWORK
// 
// --------------------------------------
// ViewManager
app.utils.ViewManager = (function() {
    var _regions = {};

    return {
        // register a region
        // name: a unique name for this region
        // selector: a DOM selector for this region
        addRegion: function(name, selector) {
            _regions[name] = {
                el: $(selector)
            };
        },

        // render a new view in a region
        // region: the name of the region
        // newView: the Backbone view object to render
        swap: function(region, newView) {
            region = _regions[region];

            if (!region) {
                return false;
            }

            // if a current view exists in region, unset and remove it
            if (region.view) {
                region.view.unsetView();
                region.view.unset();
            }

            // set the new view as current for the region
            region.view = newView;

            // render the new view into the region
            region.el.empty().html(newView.render().el);
        }
    };
})();


// a simple Base view
app.views.base = Backbone.View.extend({

    templateData: {},

    // to render the template on the view, just add a 'template'
    // variable to it which is the ID of the template on the page
    // 
    // NOTE: this is only a demo for simple views. write your own
    // render() method in your view if you have special requirements
    render: function() {
        if (this.template) {
            var template = _.template($(this.template).html());

            $(this.el).html(template(this.templateData));
        }
        return this;
    },

    // clean up before removing the view
    unset: function() {
        // turn off all bindings on the view
        this.off();

        // remove self from the page
        this.remove();
    },

   ...