MarionetteJS chapter 2 views part 2

Marionette Views demostrated http://marionettejs.com

by Steven Senkus

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>
<script src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.1.0/bootstrap.min.js"></script>
<header>
    
<h2>Marionette Views- CollectionView</h2>

    <script id="categoryTemplate" type="text/template">
        <a href="#<%= name%>"> <%= name %> ( <%= booksOnCategory %> ) </a>
            <button class="info">Details</button >
    </script>
</header>
<div id="container" class="well">
    <div>

CSS

@import url('http://twitter.github.com/bootstrap/assets/css/bootstrap.css');
 .container {
    margin-top: 10px;
}

JavaScript

CategoryModel = Backbone.Model.extend({
    defaults: {
        name: '',
        booksOnCategory: 0
    }
});

CategoriesCollection = Backbone.Collection.extend({
    model: CategoryModel
});

var categories = new CategoriesCollection([{
    name: "Math",
    booksOnCategory: 3
}, {
    name: "Science",
    booksOnCategory: 4
}, {
    name: "Hisotry",
    booksOnCategory: 5
}, {
    name: "Sports",
    booksOnCategory: 7
} ]);

var CategoryView = Backbone.Marionette.ItemView.extend({
    tagName: 'li',
    template: "#categoryTemplate",
    events: {
        "mouseenter .info": "showDetails",
            "mouseleave .info": "hideDetails"
    },
    triggers: {
        "click .info": "add:item"
    },
    showDetails: function () {
        this.$(".info").popover({
            title: this.model.get('name'),
            content: this.model.get('booksOnCategory')
        });
        this.$(".info").popover('show');
    },
    hideDetails: function () {
        this.$(".info").popover('hide');
    },
});

CategoriesView = Backbone.Marionette.CollectionView.extend({
    tagName: 'ul',
    className: 'unstyled',
    itemView: CategoryView
});

var categoriesView = new CategoriesView({
    collection: categories,
    el: "#container"
});
categoriesView.on("item:added", function () {
    this.collection.add(
        {
            name: "Maths",
            booksOnCategory: 33
        }
    )
});
categoriesView.render();