MarionetteJS (Backbone.Marionette) Playground

A base template to use for building Backbone and Marionette applications. http://marionettejs.com

by Steven Senkus

HTML

<script src="http://underscorejs.org/underscore.js"></script>
<script src="http://backbonejs.org/backbone.js"></script>
<script src="http://marionettejs.com/downloads/backbone.marionette.js"></script>
<header>
    
<h1>A Marionette Playground</h1>

</header>
<ul id="nav"></ul>
<div id="main"></div>

<script type="text/html" id="sample-template">
    put some content <%= contentPlacement %> .
</script>
<script type="text/template" id="nav-list-item">
    <a href="<%= link %>"><%= title %></a>
</script>

JavaScript

// Define the app and a region to show content
// -------------------------------------------

var App = new Marionette.Application();

App.addRegions({
    "mainRegion": "#main",
    'navRegion': '#nav'
});

// Create a module to contain some functionality
// ---------------------------------------------

App.module("SampleModule", function (Mod, App, Backbone, Marionette, $, _) {

    // Define a view to show
    // ---------------------

    var MainView = Marionette.ItemView.extend({
        template: "#sample-template"
    });
    
    var NavItem = Marionette.ItemView.extend({
        template: '#nav-list-item',
        tagName: 'li'
    })
    
    var NavItems = Marionette.CollectionView.extend({
        tagName: 'ul',
        itemView: NavItem
    });

    // Define a controller to run this module
    // --------------------------------------

    var MainController = Marionette.Controller.extend({

        initialize: function (options) {
            this.region = options.region
        },

        show: function () {
            var model = new Backbone.Model({
                contentPlacement: "here"
            });

            var view = new NavItems({
                
            });

            this.region.show(view);
        }

    });
    
    var NavController = Marionette.Controller.extend({
        
        initialize: function (options) {
            this.region = options.region
        },

        show: function () {
           
            var collection = new Backbone.Collection([
                { 
                    title: 'Home',
                    link: 'home.html'
                },{
                    title: 'About',
                    link: 'about.html'
                }]);

            var view = new NavItems({
                collection: collection
            });

            this.region.show(view);
        }
    });
    


    // Initialize this module when the app starts
    // ------------------------------------------

...