gistfile1.js

$(function(){

    // Namespace the application
    var khepin = {};

    // Todo Model
    khepin.Todo = Backbone.Model.extend({
        defaults: {
            task: null,
            done: false
        },

        // Called when the task is checked as done / undone
        toggleDone: function(){
            if(this.get('done')){
                this.set({
                    done: false
                });
                return;
            }
            this.set({
                done: true
            });
        }
    });

    // The view for a single todo element
    khepin.TodoView = Backbone.View.extend({
        tagName: 'li',

        initialize: function(){
            // fix context issues
            _.bindAll(this, 'toggleDone', 'render');
        },

        events: {
            'click input'       : 'toggleDone'
        },

        toggleDone: function() {
            this.model.toggleDone();
            this.$('span').toggleClass('done');
        },
        
        render: function() {
            $(this.el).html('<div><input name="khepin_todobundle_todotype[done]" class="check" value="1" type="checkbox"> - <span>' + this.model.get('task') + '</span></div>')
            return this;
        }
    });

    // this is the important part for initializing from html!
    khepin.Todos = Backbone.Collection.extend({
        model: khepin.Todo,

        // In this function we populate the list with existing html elements
        initialize: function() {
            _.each(
                // get all the <li></li> todo items (the base for the todo view)
                // and for each of them:
                $('.todo'),
                function(a){
                    // Create the model
                    var todo = new khepin.Todo();
                    // Find the todo's text
                    var task = $(a).find('span')[0];
                    task = $(task).text();
                    // set the model correctly
                    todo.set({
                        task: task
                    });
                    // create the todo view
                    var todoView = new khepin.TodoView({
                        model: todo,
                        el: a // the el has to be set here. I first tried calling new TodoView and setting the 'el' afterwards
                        // and the view wasn't managed properly. We set the "el' to be the <li></li> we got from jQuery
                    });
                // Add this new model to the collection
                this.add(todo);
                },
                this
            );
        }
    })

    khepin.AppView = Backbone.View.extend({
        el: 'body',

        initialize: function(){
            _.bindAll(this, 'appendTodo');
            this.collection = new khepin.Todos();
            this.input = $('#khepin_todobundle_todotype_task');
            // event bindings
            // Note that since the code was not bound to the "add" event yet, the items we got from the HTML
            // were not added a second time
            this.collection.bind('add', this.appendTodo);
        },

        events: {
            'click button#add'                          : 'addTodo',
            'keypress #khepin_todobundle_todotype_task' : 'createOnEnter'
        },

        addTodo: function(){
            var text = prompt('What task?');
            var todo = new khepin.Todo();
            todo.set({
                task: text
            });
            this.collection.add(todo);
        },

        createOnEnter: function(evt){
            if(evt.keyCode == 13){
                var text = this.input.val();
                this.collection.add({task: text});
                this.input.val('');
                return false;
            }
        },

        appendTodo: function(todo){
            var itemView = new khepin.TodoView({
                model: todo
            });
            this.$('ul').prepend(itemView.render().el);
        }
    });

    var app_view = new khepin.AppView;
});