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>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<header>
    
<h1>CompositeView demo</h1>

</header>
</br>
<script type="text/html" id="movie-list">
    <div class = "panel panel-primary"> 
        <div class = "panel-heading" > 
            <h3 class = "panel-title" > Composite view: Movie listing </h3>           
        </div > 
        <div class = "panel-body" ></div>
</div >
</script>

<script type="text/template" id="movie-list-item">
    Title: <%= title %> . <button type="button"
    class="btn btn-danger"> Delete </button>
</script>
    
<!-- Original 'prerendered' html -->
<div id="container"><div>
    <div class="panel panel-primary"> 
        <div class="panel-heading"> 
            <h3 class="panel-title"> Composite view: Movie listing </h3>           
        </div> 
        <div class="panel-body"><li>
    Title: Braveheart . <button type="button" class="btn btn-danger"> Delete </button>
</li><li>
    Title: Gone in 59 seconds! . <button type="button" class="btn btn-danger"> Delete </button>
</li><li>
    Title: Top gun . <button type="button" class="btn btn-danger"> Delete </button>
</li><li>

</li><li>
    Title: Titanic . <button type="button" class="btn btn-danger"> Delete </button>
</li><li>
    Title: Snakes on a plane :/ . <button type="button" class="btn btn-danger"> Delete </button>
</li></div>
</div>
</div></div></div></div>

CSS

li {
    height: 40px;
}
li > button {
    float: right;
}

.listItem {
 color: green;   
}
}

JavaScript

// Define a collection
var col = Backbone.Collection.extend({});
var colInstance = new col();
colInstance.set([{
    title: "Braveheart"
}, {
    title: "Gone in 59 seconds!"
}, {
    title: "Top gun"
}, {
    title: "Family guy"
}, {
    title: "Titanic"
}, {
    title: "Snakes on a plane :/"
}]);

// Itemview
var movieItemView = Marionette.ItemView.extend({
    tagName: "li",
    className: 'listItem',
    template: "#movie-list-item",
    ui: {
        removebtn: '.btn-danger'
    },
    triggers: {
        'click @ui.removebtn': 'movie:delete'
    }
});

// Composite view
var movieCompView = Marionette.CompositeView.extend({
    template: "#movie-list",
    itemViewContainer: ".panel-body",
    itemView: movieItemView
});

// Create a region
var rm = new Marionette.RegionManager();
rm.addRegion("container", "#container");

// Create instance of composite view
var movieCompViewInstance = new movieCompView({
    collection: colInstance
});

// Controller event listeners
movieCompViewInstance.on("itemview:movie:delete", function (view) {
    // Remove model from collection; 'this' revers to the scope of the composite view
    this.collection.remove(view.model);    
});

// Show the collectionView with a delay, replacing the pre-rendered html
_.delay(function() {
    console.log('updating list with marionette views!');
    rm.get('container').show(movieCompViewInstance);
}, 5000);