MarionetteJS (Backbone.Marionette) Playground

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

by jscheel

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 %>.
</script>
    
    
<script type="text/html" id="docgroup-template">
    <h2><%= title %></h2>
  <ul></ul>
</script>
      
<script type="text/html" id="doc-template">
    <h3><%= title %></h3>
  <%= size %>
</script>

JavaScript

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

var App = new Marionette.Application();

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

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

App.start();



var docGroup = new Backbone.Model();
docGroup.set({'title': 'foo group'});

var docCol = new Backbone.Collection([new Backbone.Model({'title': 'foo1', 'size': '1mb'}), new Backbone.Model({'title': 'foo2', 'size': '2mb'}), new Backbone.Model({'title': 'foo3', 'size': '3mb'})]);


var DocItemView = Backbone.Marionette.ItemView.extend({
    template: '#doc-template',
    tagName: 'li'
});

var DocGroupView = Backbone.Marionette.CompositeView.extend({
    template: '#docgroup-template',
    itemView: DocItemView,
    itemViewContainer: 'ul',
    onRender: function() {
        debugger
    }
});

App.mainRegion.show(new DocGroupView({stuff: 'bar', model: docGroup, collection: docCol}));