Backbone Marionette - view re-render tests

HTML

<script src="http://documentcloud.github.com/underscore/underscore-min.js"></script>
<script src="http://backbonejs.org/backbone-min.js"></script>
<script src="https://raw.github.com/derickbailey/backbone.marionette/master/lib/backbone.marionette.min.js"></script>
<div id="page"></div>
<script type="text/template" id="app-layout-template">
    <div id="header" class="header row"></div>
    <div id="sidebar" class="left col">
        Left col here    
    </div>
    <div id="main" class="right col">
        <div class="header row">
            View or edit something
        </div>
        <div class="body row scroll-y">
            Here’s some content that can scroll vertically
        </div>
    </div>
    <div class="footer row">
        My footer
    </div>
</script>
<script type="text/template" id="app-header-template">
    <h1>This is My App!</h1>
    <button id="toggle-sidebar-command">toggle sidebar</button>
</script>
<script type="text/template" id="app-sidebar-template">
    <h3>This is Sidebar!</h3>
    <button id="alert-command">Click Me!</button>
</script>

CSS

body { margin: 0 }
.row, .col { overflow: hidden; position: absolute; }
.row { left: 0; right: 0; }
.col { top: 0; bottom: 0; }
.scroll-x { overflow-x: auto; }
.scroll-y { overflow-y: auto; }

.header.row { height: 75px; top: 0; }
.body.row { top: 75px; bottom: 50px; }
.footer.row { height: 50px; bottom: 0; }
.header h1 {
    margin: 0;
}
/* Specific pane configuration */
.header.row { height: 75px; background: #333; }
/*.body.row { top: 75px; bottom: 0px; background: #000; padding: 1em; }*/
/*.footer.row { height: 50px; bottom: 0; background: #333; }*/
.footer.row { background: #333; }
.left.col { background-color: Green; }
body { color: White; background: #000; font-family: Segoe UI, Helvetica, Arial, Sans-Serif; }
.header, .footer { padding: 0 1em; }

.left.col { top: 75px; width: 250px; }
.right.col { top: 75px; left: 250px; right: 0; }
.right.col .header.row { height: 75px; line-height: 75px; background-color: red; }
.body.row { top: 75px; bottom: 50px; }
.footer.row { height: 50px; bottom: 0; line-height: 50px; }

JavaScript

MyApp = new Backbone.Marionette.Application;
MyApp.addInitializer(function(options){
    var appHeaderView = new AppHeaderView({
        vent: this.vent
    });
    var appSidebarView = new AppSidebarView({
        vent: this.vent
    })
    var layout = new AppLayout();
    MyApp.appRegion.show(layout);

    layout.headerRegion.show(appHeaderView);
    layout.sidebarRegion.show(appSidebarView);
    this.vent.on("sidebar:toggle", function(e) {
        if (layout.sidebarRegion.currentView) {
            layout.sidebarRegion.close();
        } else {
            layout.sidebarRegion.show(appSidebarView);
        }
    });

 });

var AppLayout = Backbone.Marionette.Layout.extend({
    template: "#app-layout-template",
    regions: {
        mainRegion: "#main",
        headerRegion: "#header",
        sidebarRegion: "#sidebar"
    }
});
MyApp.addRegions({
    appRegion: '#page'
});
var AppHeaderView = Backbone.Marionette.ItemView.extend({
    template: "#app-header-template",
    events: {
        "click #toggle-sidebar-command": "toggleSidebar"
    },
    initialize: function(options) {
        if(options) {
            if(options.vent) {
                this.vent = options.vent
            }
        }
    },
    toggleSidebar: function(e) {
        if(this.vent) {
            this.vent.trigger("sidebar:toggle");
        }
    }
});
var AppSidebarView = Backbone.Marionette.ItemView.extend({
    template: "#app-sidebar-template",
    events: {
        "click #alert-command": "makeAlert"
    },
    initialize: function(options) {
        if(options) {
            if(options.vent) {
                this.vent = options.vent
            }
        }
    },
    makeAlert: function(e) {
        alert("I'm a sidebar!")
    }
});

MyApp.start();