ドットインストールBackbone.js入門のサンプルソースにコメント付けました。 http://dotinstall.com/lessons/basic_backbonejs

app.js

(function() {

///////////////////////////////////////
// モデル定義
///////////////////////////////////////
// タスクモデル
var Task = Backbone.Model.extend({
  defaults: {
    title: 'do something',
    completed: false
  },
  //　バリデート
  validate: function(attrs) {
    // タイトルが空でないことを確認する
    if ( _.isEmpty(attrs.title) ) {
      // 空の場合はバリデートエラー
      // 何かしらの文字列を返すとBackboneがinvalidイベントを発行する
      return 'title must not be empty';
    }
  },
  // 初期化
  initialize: function() {
    // invalidを購読
    // 上記バリデート関数のエラー時に発行される
    this.on('invalid', function(model, error) {
      //　エラー内容を#errorタグに表示
      $('#error').html(error);
    });
  }
});
// タスクモデルを拡張したタスク一覧コレクション
var Tasks = Backbone.Collection.extend({ model: Task });


///////////////////////////////////////
// ビュー定義
///////////////////////////////////////
// タスクビュー
// タスク1件に対して一つのビュー
var TaskView = Backbone.View.extend({
  // 当ビューで生成するタグ
  tagName: 'li',
  // 初期化処理
  initialize: function() {
    // destroyイベントを購読
    // remove関数を呼ぶ
    this.model.on('destroy', this.remove, this);
    // changeメソッドを購読
    // render関数を呼ぶ
    this.model.on('change', this.render, this);
  },
  // イベントを定義
  events: {
    // cssのdeleteクラスをクリックしたらdestroy関数を実行する
    'click .delete': 'destroy',
    // cssのtoggleクラスをクリックしたらtoggle関数を実行する
    'click .toggle': 'toggle'
  },
  // toggle関数
  toggle: function() {
    // completedのtrue,falseを切り替える
    this.model.set('completed', !this.model.get('completed'));
  },
  // destroy関数
  destroy: function() {
    if (confirm('are you sure?')) {
      // このモデルを削除する
      this.model.destroy();
    }
  },
  // remove関数
  remove: function() {
    // 画面から自身のエレメントを削除する
    this.$el.remove();
  },
  // テンプレートを定義
  template: _.template($('#task-template').html()),
  // 画面に描画するHTMLを生成する関数
  render: function() {
    // 自身のモデルをJSON化したものをテンプレートに渡してHTMLを取得する
    var template = this.template(this.model.toJSON());
    // そのHTMLをタグ（上記のtagNameにあるliタグ）の中に入れる
    this.$el.html(template);
    return this;
  }
});
// タスク一覧ビュー
var TasksView = Backbone.View.extend({
  // ulタグでまとめる
  tagName: 'ul',
  initialize: function() {
    // addイベントを購読
    // addイベントが発行されたらaddNew関数を呼び出す
    // ※ addイベントは自動的に発行される
    this.collection.on('add', this.addNew, this);
    // changeイベントを購読
    // changeイベントが発行されたらupdateCount関数を呼び出す
    this.collection.on('change', this.updateCount, this);
    // destroyイベントを購読
    // destroyイベントが発行されたらupdateCount関数を呼び出す
    this.collection.on('destroy', this.updateCount, this);
  },
  // addNew関数
  addNew: function(task) {
    // 引数のtaskモデルから新しいTaskViewを生成する
    var taskView = new TaskView({model: task});
    // taskViewで生成したhtmlをulタグにappendする
    this.$el.append(taskView.render().el);
    // フォームのタイトルを空にする
    // フォーカスを当てる
    $('#title').val('').focus();
    // 残りタスク数を出すudpateCount関数を呼び出す
    this.updateCount();
  },
  // updateCount関数
  updateCount: function() {
    var uncompletedTasks = this.collection.filter(function(task) {
      return !task.get('completed');
    });
    $('#count').html(uncompletedTasks.length);
  },
  // 画面に描画するHTMLを生成する関数
  render: function() {
    // タスク一覧の数だけ繰り返し
    this.collection.each(function(task) {
      // タスクモデルを引数にタスクビューを生成
      var taskView = new TaskView({model: task});
      // タスク一覧を表示するタグにタスクビューを追加する
      this.$el.append(taskView.render().el);
    }, this);
    // 残タスク数を更新する
    this.updateCount();
    return this;
  }
});
// タスク追加ビュー
var AddTaskView = Backbone.View.extend({
  // このビューを追加するタグ名
  el: '#addTask',
  // イベント定義
  events: {
    'submit': 'submit'
  },
  // submit関数
  submit: function(e) {
    // 実際にsubmitされないようにデフォルトイベントをキャンセル
    e.preventDefault();
    // 新規タスクを生成
    var task = new Task();
    // タスクにタイトルをセットしてバリデートする
    if (task.set({title: $('#title').val()}, {validate: true})) {
      // その結果OKならタスク一覧（collection）に新規タスクを追加
      this.collection.add(task);
      // 表示しているエラーメッセージを消す
      $('#error').empty();
    }
  }
});


///////////////////////////////////////
// 画面生成
///////////////////////////////////////

// タスク一覧
var tasks = new Tasks([
  {
    title: 'task1',
    completed: true
  },
  {
    title: 'task2'
  },
  {
    title: 'task3'
  }
]);
// タスク一覧を引数にタスク一覧ビュー生成
var tasksView = new TasksView({collection: tasks});
// タスク一覧を引数にタスク追加ビュー生成
var addTaskView = new AddTaskView({collection: tasks});
// タスク一覧ビューのHTMLをid=tasksタグに追加
$('#tasks').html(tasksView.render().el);

})();

index.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
    <title>Backbone.js</title>
    <style>
        /* タスク完了時のスタイル */
        .completed {
            text-decoration: line-through;
            color: gray;
        }
    </style>
</head>
<body>

    <h1>Tasks</h1>

    <!-- タスク追加フォーム -->
    <form id="addTask">
        <input type="text" id="title">
        <input type="submit" value="add">
        <!-- エラー -->
        <span id="error"></span>
    </form>

    <!-- タスク一覧 -->
    <div id="tasks">
    </div>
    <!-- 未完了タスク数 -->
    <p>Tasks left: <span id="count"></span></p>

    <!-- テンプレート -->
    <script type="text/template" id="task-template">
        <input type="checkbox" class="toggle" <%= completed ? 'checked' : '' %>>
        <span class="<%= completed ? 'completed' : ''%>">
            <%- title %>
        </span>
        <span class="delete">[x]</span>
    </script>

    <script src="js/underscore.js"></script>
    <script src="js/jquery.js"></script>
    <script src="js/backbone.js"></script>
    <script src="js/app.js"></script>
</body>

</html>