// models/task.js · Backbone.Model
var Task = Backbone.Model.extend({
  defaults: {
    title: '',
    completed: false
  },

  toggle: function () {
    this.save({
      completed: !this.get('completed')
    });
  }
});

var Tasks = Backbone.Collection.extend({
  model: Task,
  url: '/api/tasks',
  comparator: 'title'
});

var tasks = new Tasks();
tasks.fetch({ reset: true });

// views/task.js · Backbone.View
var TaskView = Backbone.View.extend({
  tagName: 'li',
  className: 'task',
  events: {
    'click .toggle': 'toggleTask'
  },

  initialize: function () {
    this.listenTo(this.model, 'change', this.render);
  },

  render: function () {
    this.$el.html(this.template(this.model.toJSON()));
    return this;
  },

  template: _.template(
    '<button class="toggle"><%- title %></button>'
  ),

  toggleTask: function () {
    this.model.toggle();
  }
});