MarionetteJS (Backbone.Marionette) Playground

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

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>

<article id="main">
</article>

<script type="text/html" id="sample-template">
  put some content <%= contentPlacement %>.
  <div class="menu"></div>
</script>
    
    <script type="text/html" id="menu-template">
        <button class="js-click-me">click <%= contentPlacement %></button>
    </script>

JavaScript

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

var App = new Marionette.Application();

App.addRegions({
    "mainRegion": "#main" 
});

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

//App.module("SampleModule", function(Mod, App, Backbone, Marionette, $, _){
    
    // Define a view to show
    // ---------------------
    
    var MainView = Marionette.Layout.extend({
        regions: {
            'menu': '.menu'
        },
        template: "#sample-template",
        initialize: function() {
            this.listenTo(this, 'childChange', this.render);
        },
        
        onRender: function() {
            this.menu.show(this.options.menuView);
        },
        setChildView: function(view) {
           
           this.options.menuView = view;
           this.trigger('childChange');
        }
    });
    
    var ChildView = Marionette.ItemView.extend({
        template: '#menu-template',
        triggers: {
            'click .js-click-me': 'clicked'
        },
        onClicked: function() {
            alert('the button was clicked...');
        }
    });
    
    // Define a controller to run this module
    // --------------------------------------
    
    var Controller = Marionette.Controller.extend({
        
        initialize: function(options){
            this.region = options.region
        },
        
        show: function(){
            var model = new Backbone.Model({
                contentPlacement: "here"
            });
            
            var childView = new ChildView({
                model: model
            });
    
            var view = new MainView({
                model: model,    
                menuView: childView
            });
            
            
            
            this.region.show(view);
            
            var model2 = new Backbone.Model({
                contentPlacement: "there"
        ...