todos.js

$(function() {
var App = {
    models: {},
    views: {},
    collections: {},
}

App.models.Task = Backbone.Model.extend({
    url: "/tasks",
    destroy: function() {
        this.prepareUrl();
        return Backbone.Model.prototype.destroy.apply(this, arguments);
    },

    update: function() {
        this.prepareUrl();
        this.save();
    },

    prepareUrl: function() {
        this.url += "/" + this.get("id");
    }
});

App.collections.Tasks = Backbone.Collection.extend({
    model: App.models.Task,
    url: "/tasks"
});

App.views.TasksList = Backbone.View.extend({
    events: {
        "click #create-task": "createTask"
    },

    ui: {},

    template: _.template($("#template-task-list").html()),
    initialize: function() {
        this.listenTo(this.collection, "sync add remove change", this.render);
        this.listenTo(this.collection, "details", this.showDetails);
    },

    showDetails: function(task) {
        this.ui.details.html(task.get("description"));
    },

    render: function() {
        this.$el.html(this.template());
        this.setupUi();

        this.collection.each(function(task) {
            var view = new App.views.Task({
                model: task
            });

            this.ui.container.append(view.render().el);
        }, this);

        return this;
    },

    createTask: function() {
        var task = new App.models.Task();
        task.set("title", this.ui.title.val());
        task.set("description", this.ui.description.val());
        task.save();
        this.collection.add(task);
    },

    setupUi: function() {
        this.ui = {
            title: this.$el.find(".title"),
            description: this.$el.find(".description"),
            container: this.$el.find(".tasks"),
            details: this.$el.find(".details")
        }
    }
});

App.views.Task = Backbone.View.extend({
    events: {
        "click .update": "update",
        "click .delete": "destroy",
        "click .details": "details"
    },

    template: _.template($("#template-task").html()),
    render: function() {
        this.$el.html(this.template(this.model.toJSON()));
        this.setupUi();
        return this;
    },

    details: function() {
        this.model.trigger("details", this.model);
    },

    update: function() {
        var data = {
            title: this.ui.title.html(),
            description: this.ui.description.html()
        }

        this.model.set(data);
        this.model.update();
    },

    destroy: function() {
        this.model.destroy();
    },

    setupUi: function() {
        this.ui = {
            title: this.$el.find(".title"),
            description: this.$el.find(".description")
        }
    }
});

App.start = function() {
    var tasks = new App.collections.Tasks();
    var listView = new App.views.TasksList({
        el: "#container",
        collection: tasks
    });

    tasks.fetch();
}

App.start();
});