Backbone.js Todo Example

HTML

<script src="https://rawgithub.com/douglascrockford/JSON-js/master/json2.js"></script>
<script src="https://rawgithub.com/jashkenas/underscore/1.5.2/underscore-min.js"></script>
<script src="https://rawgithub.com/jashkenas/backbone/1.0.0/backbone-min.js"></script>
<script src="https://rawgithub.com/jeromegn/Backbone.localStorage/v1.1.6/backbone.localStorage.js"></script>
<!-- Main View -->

<div id="main">
</div>

<!-- Template -->

<script type="text/template" id="select-template">
    Select:
    <select id="rate">
        <% _.each(this.model.models, function(p) { %>
             <option id="<%=p.id%>"<%= (p.get('rated') ? 'selected' : '') %> > <%= p.get('name') %></option>
        <% }); %> 
    </select>
</script>

JavaScript

var testPosts = new Backbone.Collection([
    { id: 1, rated: false, name: 'box 1' },
    { id: 2, rated: false, name: 'box 2' },
    { id: 3, rated: true,  name: 'box 3' }
]);

var PostView = Backbone.View.extend({

    tagName: "div",
    el: '#main',
    template : _.template($( '#select-template' ).html()),

    events: {
        'change #rate': 'postSelected'
    },

    initialize: function() {
        this.model = testPosts;
    },

    render: function() {
        var items = this.model.toJSON();
        this.$el.html(this.template(items));
    },
    
    // callbacks
    
    postSelected: function(e) {
        console.log(e);
    }

});

var view = new PostView();
view.render();