Marionette: dynamic application layouts

How to swap application layouts.

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/lodash.js/2.4.1/lodash.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/backbone.js/1.1.2/backbone-min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/backbone.marionette/2.2.2/backbone.marionette.min.js"></script>
<div class="main">
    <div class="header"></div>
    <div class="content"></div>
    <div class="footer"></div>
</div>

<template id="header-template">Header</template>
<template id="content-template">
    <table class="table ip_pool_table">
        <thead>
            <tr>
                <th>Subnet</th>
            </tr>
        </thead>
        <tbody class="networks-list">
            <tr><td>192.168.0.1</td><tr>
            <tr><td>192.168.0.2</td><tr>
            <tr><td>192.168.0.3</td><tr>
        </tbody>
    </table>
</template>
<template id="footer-template">Footer</template>

<template id="new-layout-template">
    <div class="header"></div>
    <div class="content"></div>
    <div class="footer"></div>
    <div class="copy">&copy; 2014</div>
</template>

CSS

.main > div {
    margin: 1em;
    padding: 1em;
    border: dashed 1px black;
}
.content, .footer{
    width: 30%;
    display: inline-block;
    vertical-align: top;
}
.hidden {
    display: none;
}

.new div {
    border-radius: 4px;
}


.new .copy {
    font-size: 0.8em;
}

JavaScript

var Marionette = Backbone.Marionette;

// In a real application, the template elements
// would be in the head when the page is loaded.
$('template').appendTo('head');

var MyApp = Marionette.Application.extend({
    getRegionManager: function() {
        var layout = this.getOption('layout');
        if (layout) {
            new Marionette.Region({
                el: 'body'
            }).show(layout);
            return layout.regionManager;
        } else {
            return new Marionette.RegionManager();
        }
    },
    regions: {
        header: '.header',
        content: '.content',
        footer: '.footer'
    }
});

var layout = new Marionette.LayoutView({
    className: 'main new',
    template: '#new-layout-template'
});

var app = new MyApp({ layout: layout });

app.header.show(new Marionette.ItemView({
    template: '#header-template'    
}));

app.content.show(new Marionette.ItemView({
    template: '#content-template'
}));

app.footer.show(new Marionette.ItemView({
    template: '#footer-template'
}));