Accordion View using Backbone.Marionette

This demo shows how a Marionette CompositeView could be used as a Accordion.

by oroce

HTML

<script src="http://documentcloud.github.com/underscore/underscore-min.js"></script>
<script src="http://documentcloud.github.com/backbone/backbone-min.js"></script>
<script src="https://raw.github.com/derickbailey/backbone.marionette/master/lib/backbone.marionette.min.js"></script>
<script id="movie-template" type="text/template">
    <h1>Movies</h1>
    <div id="items"></div>
</script>

<script id="movie-item-template" type="text/template">
    <h2><%= title %></h2>
    <p><%= text %></p>
</script>

<div id="movieview"></div>

CSS

h2 {
    background: black;
    color: white;
    border-bottom: 1px solid white;
    cursor: pointer;
}

h1 { 
    font-size: 20px; 
}

.item { 
    background: #ff8;
}

.item p {
    display: none;
}

JavaScript

// The accordion base CompositeView
var AccordionView = Backbone.Marionette.CompositeView.extend({

    constructor: function(){
        Backbone.Marionette.CompositeView.prototype.constructor.apply(this, arguments);
        _.bindAll(this, "saveSelection");
        this.vent = new Backbone.Marionette.EventAggregator();
        this.vent.bind("AccordionView:SaveSelection", this.saveSelection);
        this.bind("item:added", function(view){ view.vent = this.vent; }); 
    },
    saveSelection: function(modelcid) {
        if (this.currentSelectedCid) { 
            var childView = this.children[this.currentSelectedCid];
            if (childView) { childView.itemDeselect(); } 
        }
        this.currentSelectedCid = modelcid;
    }
});

// The accordion base ItemView
var AccordionItemView = Backbone.Marionette.ItemView.extend({

    itemDeselect: function() {
        this.minimize();
        this.model.set({ selected: false });
    },
    itemSelect: function() {
        if (this.model.get("selected") === true) { return; }
        this.model.set({ selected: true });
        this.maximize();
        this.vent.trigger("AccordionView:SaveSelection", this.model.cid);
    },
    minimize: function() {
        this.$el.find(this.elContent).slideUp(this.slideUpSpeed);
    },
    maximize: function() {
        this.$el.find(this.elContent).slideDown(this.slideDownSpeed);
    }
});

// The extended MovieItemView
var MovieItemView = AccordionItemView.extend({
    events: { "click h2": "itemSelect" },
    template: '#movie-item-template',
    className: 'item',
    slideUpSpeed: 400,
    slideDownSpeed: 300,
    elContent: 'p'
});

// The extende MovieView
var MovieAccordionView = AccordionView.extend({
    el: '#movieview',
    template: '#movie-template',
    itemView: MovieItemView,
    appendHtml: function(collectionView, itemView) {
        collectionView.$("#items").append(itemView.el);
    }
});

var item0 = {
    title: 'O brother where art thou',
    text:...