Bakckbone + KendoUI: PanelBar With Marionette

Combining BackboneJS and KendoUI controls

by aaronaudic

HTML

<script src="http://underscorejs.org/underscore.js"></script>
<script src="http://backbonejs.org/backbone.js"></script>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.3.1114/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.3.1114/styles/kendo.default.min.css">
<script src="http://cdn.kendostatic.com/2012.3.1114/js/kendo.all.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/backbone.wreqr/0.1.0/backbone.wreqr.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/backbone.eventbinder/0.1.0/backbone.eventbinder.min.js "></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/backbone.marionette/1.0.1-bundled/backbone.marionette.min.js"></script>
<script type="text/html" id="book-view-template">
    <div><strong>Title:</strong> <%= title %></div>
    <div><strong>Author:</strong> <%= author %></div>
</script>
  
<script type="text/html" id="category-panel-template">
    <span><%= name %></span>
    <div class="book-list"></div>
</script>
    
<div id="placeholder"></div>

CSS

.book {
    margin: 10px 0px;
    padding: 0px 0px 5px 5px;
    border-bottom: 1px solid #ccc;
}

strong {
    font-weight: bold;
}

JavaScript

// View Definitions
// ----------------

// Define an Book View to render the individual book
var BookView = Marionette.ItemView.extend({
    className: "book",
    
    template: "#book-view-template"
});

// Define a Category View which will render the book
// Categories as panels, rendering the collection of book
// for each category within that panel.
//
// A Marionette.CompositeView is a view that can render
// both a model with template, and a collection of models
// that get placed within the rendered template.
var CategoryView = Marionette.CompositeView.extend({

    // the HTML tag name for this view
    tagName: "li",
    
    // the template to render for the category
    template: "#category-panel-template",
    
    // the view type to render for the collection of books
    itemView: BookView,
    
    // where to place the list of books, within the rendered template
    itemViewContainer: ".book-list",
    
    initialize: function(){
        // get the list of books for this category and assign it to
        // this view's "collection" so that it will render as the
        // specified itemView instance
        this.collection = this.model.books;
    }
    
});

// Define a Category List view that will render the 
// collection of categories as CategoryView instances
var CategoryListView = Marionette.CollectionView.extend({

    // render each model in to a category view
    itemView: CategoryView,
    
    // tell to to render a "ul" tag as the wrapper
    tagName: "ul",
    
    // after it's all rendered and has been added to the DOM,
    // initialize the KendoUI PanelBar
    onShow: function(){
        this.$el.kendoPanelBar({
             expandMode: "single"
        });
    }
    
});


// Model And Collection Definitions
// --------------------------------

// Define a Book model to hold info about books
var Book = Backbone.Model.extend({});

// Define a collection of books
var BookCollection = Backbone.Collection.extend({

    // tell it...