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>
<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>
<script src="//cdnjs.cloudflare.com/ajax/libs/backbone.marionette/1.8.8/backbone.marionette.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-item1">
    Title: <%= title %>
</script>
    
<script type="text/template" id="movie-list-item2">
    <strong>Movie name: <%= title %></strong>
</script>
    
    <div id="container"></div>

CSS

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

JavaScript

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

// Itemview 1
var movieItemView1 = Marionette.ItemView.extend({
    tagName: "li",
    className: 'listItem',
    template: "#movie-list-item1"
});

// Itemview 2
var movieItemView2 = Marionette.ItemView.extend({
    tagName: "li",
    className: 'listItem',
    template: "#movie-list-item2"
}); 

// Composite view
var movieCompView = Marionette.CompositeView.extend({
    template: "#movie-list",
    itemViewContainer: ".panel-body",
    itemViews: {
        view1: movieItemView1,
        view2: movieItemView2 // etc..
    },
    getItemView: function( item ) {
        // Get the view key for this item
        var viewId = item.get('viewId');

        // Get all defined views for this CompositeView
        var itemViewObject = Marionette.getOption(this, "itemViews");

        // Get correct view using given key
        var itemView = itemViewObject[viewId];


        if (!itemView){
            throwError("An `itemView` must be specified", "NoItemViewError");
        }
        return itemView;
    }
});

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

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

// Show the collectionView
rm.get('container').show(movieCompViewInstance);