Backbone with Collection

Simple example iterates Collection, renders on page with template

HTML

<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.5.2/underscore-min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.0.0/backbone-min.js"></script>
<ol id="container"></ol>

<script type="text/template" id="person_template">
    <% _.each(people, function(person) { %>
        <li><%= person.name %>, <%= person.age %></li>
    <% }); %>
</script>

CSS

body {
    font-size: 14px;
    color: blue;
}

JavaScript

//define Model
var Person = Backbone.Model.extend({  
    defaults : {
        name : 'unknown',  
        age : 20
    }  
});  

//define Collection
var PeopleCollection = Backbone.Collection.extend({
    model: Person //like generic
});

//define View
var PeopleView = Backbone.View.extend({
    el: '#container',
    initialize: function(options) {
        this.render();
    },
    render: function() {
        var template = _.template($("#person_template").html());
        var data = {people: this.collection.toJSON()};
        this.$el.html(template(data)); //fill in data
    }
});

//create collection instance
var peopleCollection = new PeopleCollection([
    {
        name: 'Mohit Jain',
        age: 23
    },
    {
        name: 'Taroon Tyagi',
        age: 25,
    }
]);

//create view and bind model
var peopleView = new PeopleView({collection: peopleCollection});