MarionetteJS (Backbone.Marionette) Playground

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

by _sir

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.3.3/backbone-min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/backbone.marionette/1.8.8/backbone.marionette.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.5/handlebars.min.js"></script>
<header>
<h1>A Marionette Playground</h1>
</header>

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

<script type="text/html" id="sample-template">
  put some content {{contentPlacement}}. {{foo}}
  <ul>
    {{#bar}}
    	<li>{{../caps this}}</li>
    {{/bar}}
  </ul>
</script>

JavaScript

// Define the app and a region to show content
// -------------------------------------------
// Forked 2016/09/06

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.ItemView.extend({
        template: Handlebars.compile($('#sample-template').html()),
        templateHelpers: {
        	foo: "red",
          bar: ['One','Two','Three'],
          caps: function(str) {
          	return str.toUpperCase();
          }
        }
    });
    
    // 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 view = new MainView({
                model: model    
            });
            
            this.region.show(view);
        }
        
    });
    

    // Initialize this module when the app starts
    // ------------------------------------------
    
    Mod.addInitializer(function(){
        Mod.controller = new Controller({
            region: App.mainRegion
        });
        Mod.controller.show();
    });
});

// Start the app
// -------------

App.start();