MarionetteJS (Backbone.Marionette) Playground

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

by Nikki Rabbitt

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="layout-template">
    <div id="header">This is a header</div>
    <div id="main"></div>
</script>
<script type="text/html" id="item-template">
    <%= test %>
</script>

<script type="text/html" id="composite-template">
    <div id="collectionDiv"></div>
    <button id="saveAssessmentsBtn">Click Me</button>
    <div id="clickCount"></div>
</script>

JavaScript

var App = new Marionette.Application();

layout = Marionette.LayoutView.extend({
    el: '#main',
    regions: {
        header: '#header',
        main: '#main'
    },
    template: "#layout-template",
    count: 0,
    onChildviewSaveAssessmentsClicked: function (childView){
        this.count++
        childView.$el.find('#clickCount').append(this.count + '<br>');
    }
});
App.rootView = new layout();

var childView = Marionette.ItemView.extend({
    template: '#item-template'
});
var mainView = Marionette.CompositeView.extend({
    template: '#composite-template',
    childView: childView,
    childViewContainer: '#collectionDiv',
    collection: new Backbone.Collection([{test: 'foo'}, {test: 'bar'}]),
    ui: { saveAssessmentsBtn: '#saveAssessmentsBtn' },
    triggers: { 'click @ui.saveAssessmentsBtn': 'saveAssessmentsClicked' }
    });

App.rootView.render();
App.rootView.showChildView('main', new mainView())




App.start();