This is the base Todo application.

about

This is the todo application.
It uses Backbone's sync to talk to my JSON REST API.

todo.html

<div class="row">
    <div class="span4 offset4">
        <div class="alert alert-info fade in">
            <a class="close" data-dismiss="alert">&times;</a>
            Double click on an item to edit it's text.
        </div>
        <div id="Todos" class="well">
            <h1 class="tcenter">Todos</h1>
            <form class="form-horizontal">
                <div class="input-append">
                    <input id="new-todo" class="span3" placeholder="Add a new item..." type="text"><button class="btn btn-primary" type="button">Add</button>
                </div>
            </form>
            <ul class="todo-list unstyled"></ul>
            <i class="loading"></i>
        </div>
    </div>
</div>

todo.js

define(['text!templates/todo.html'], function (template) {
    var Todo = Backbone.Model.extend({
        defaults: function () {
            return {
                title: "empty todo...",
                done: false
            };
        },
        urlRoot: 'Todo',
        initialize: function () {
            if (!this.get("title")) this.set({ "title": this.defaults.title });
        },
        toggle: function (callback) {
            this.save({ done: !this.get("done") }, { success: callback });
        },
        clear: function () {
            this.destroy();
        }
    });
    var TodoList = Backbone.Collection.extend({
        model: Todo,
        url: 'Todo',
        done: function () {
            return this.filter(function (todo) { return todo.get('done'); });
        },
        remaining: function () {
            return this.without.apply(this, this.done());
        }
    });
    var TodoView = Backbone.View.extend({
        tagName: "li",
        template: _.template($('#item-template').html()),
        events: {
            "click .toggle": "toggleDone",
            "dblclick": "edit",
            "click .remove": "clear",
            "keypress .edit": "updateOnEnter",
            "blur .edit": "close"
        },
        initialize: function () {
            this.model.bind('change', this.render, this);
            this.model.bind('destroy', this.remove, this);
        },
        render: function () {
            this.$el.html(this.template(this.model.toJSON()));
            this.$el.toggleClass('done', this.model.get('done'));
            if (this.model.get('done')) this.$el.find('.toggle').removeClass('icon-ok').addClass('icon-remove');
            this.input = this.$('.edit');
            return this;
        },
        toggleDone: function () {
            var me = this;
            this.model.toggle(function () {
                if (me.model.get('done')) {
                    me.$el.addClass('done').find('.toggle').removeClass('icon-ok').addClass('icon-remove');
                } else {
                    me.$el.removeClass('done').find('.toggle').removeClass('icon-remove').addClass('icon-ok');
                }
            });
        },
        edit: function () {
            this.$el.addClass("editing");
            this.input.focus();
        },
        close: function () {
            var value = this.input.val();
            if (!value) this.clear();
            this.model.save({ title: value });
            this.$el.removeClass("editing");
        },
        updateOnEnter: function (e) {
            if (e.keyCode == 13) this.close();
        },
        clear: function () {
            this.model.clear();
        }
    });
    var TodoListView = Backbone.View.extend({
        todos: new TodoList,
        el: '#Todos',
        events: {
            "submit form": "preventDefault",
            "keypress #new-todo": "createOnEnter",
            "click button": "create"
        },
        preventDefault: function (e) {
            e.preventDefault();
        },
        addOne: function (todo) {
            var tView = new TodoView({ model: todo });
            this.$('.todo-list').append(tView.render().el);
        },
        addAll: function () {
            this.todos.each(this.addOne);
        },
        createOnEnter: function (e) {
            if (e.keyCode != 13) return;
            this.create();
        },
        create: function () {
            var input = this.$('#new-todo');
            if (!input.val()) return;
            this.todos.create({ title: input.val() });
            input.val('');
        },
        initialize: function () {
            this.todos.bind('add', this.addOne, this);
            this.todos.bind('reset', this.addAll, this);
        },
        render: function () {
            this.$el = $('#Todos');
            this.delegateEvents(this.events);
            this.todos.fetch({
                success: function () {
                    this.$('i').hide();
                }
            });
        }
    });
    var view = Backbone.View.extend({
        el: '.content',
        app: new TodoListView,
        render: function () {
            this.$el.html(template);
            this.app.render();
            $('.nav a[href$="todo"]').parent().addClass('active').siblings().removeClass('active');
        }
    });

    return view;
});