Marionette.js Boilerplate

Marionette.js Boilerplage

HTML

<script src="http://underscorejs.org/underscore-min.js"></script>
<script src="http://backbonejs.org/backbone-min.js"></script>
<script src="http://marionettejs.com/downloads/backbone.marionette.min.js"></script>
<div id="js-page"></div>

<script type="text/template" id="layout-template">
    <div class="js-list-container">
        List goes here
    </div>
    <div class="js-details">
        Details goes here
    </div>
</script>

<script type="text/template" id="item-view">
    Item View!!!
</script>

JavaScript

var data = new Backbone.Collection([ 
    { "firstName": "Bill", "lastName": "Smith" }, 
    { "firstName": "Mary", "lastName": "Johnson" }, 
    { "firstName": "Sally", "lastName": "Jones" }, 
]);

var MyApp = new Backbone.Marionette.Application();

MyApp.addRegions({
    mainRegion: '#js-page'
});

var AppLayoutView = Backbone.Marionette.LayoutView.extend({
    template: '#layout-template',
    
    regions: {
        listContainer: '.js-list-container',
        details: '.js-details'
    }
});

var appLayoutView = new AppLayoutView()
MyApp.mainRegion.show(appLayoutView);

    var AppItemView = Backbone.Marionette.ItemView.extend({
    template: '#item-view'
});
    
var AppCollectionView = Backbone.Marionette.CollectionView.extend({
    childView: AppItemView,
    
    collection: data
});
    


var appCollectionView = new AppCollectionView();

appLayoutView.listContainer.show(appCollectionView);

MyApp.start();

console.log(MyApp);