var app = app || {};

// Todo項目のビュー

// Todo項目を表すDOM要素
app.TodoView = Backbone.View.extend({

  tagName: 'li',

  template: _.template($('#item-template').html()),

  events: {
    'dblclick label': 'edit',
    'keypress .edit': 'updateOnEnter',
    'blur .edit': 'close'
  },

  // モデルに対する変化を監視して再描画。TodoとTodoViewは
  // 一対一対応しているため、ここではモデルを直接参照している
  initialize: function () {
    this.listenTo(this.model, 'change', this.render);
  },

  // 項目のタイトルを描画
  render: function () {
    this.$el.html(this.template(this.model.toJSON()));
    this.$input = this.$('.edit');
    return this;
  },

  // 編集モードに移行し、入力フィールドを表示
  edit: function () {
    this.$el.addClass('editing');
    this.$input.focus();
  },

  // 編集モードを終了し、Todo項目を保存
  close: function () {
    var value = this.$input.val().trim();

    if (value) {
      this.model.save({ title: value });
    }

    this.$el.removeClass('editing');
  },

  // Enterキーが押されると編集モードを終了
  updateOnEnter: function (event) {
    if (event.which === ENTER_KEY) {
      this.close();
    }
  }
});

@@ -179,30 +179,101 @@
    '
-dblclick label': 'edit
+click .toggle': 'togglecompleted',%0A    'dblclick label': 'edit',%0A    'click .destroy': 'clear
 ',%0A 
@@ -502,157 +502,801 @@
 ;%0A  
-%7D,%0A%0A  // %E9%A0%85%E7%9B%AE%E3%81%AE%E3%82%BF%E3%82%A4%E3%83%88%E3%83%AB%E3%82%92%E6%8F%8F%E7%94%BB%0A  render: function () %7B%0A    this.$el.html(this.template(this.model.toJSON()));%0A    this.$input = this.$('.edit');%0A    return this
+  this.listenTo(this.model, 'destroy', this.remove);%0A    this.listenTo(this.model, 'visible', this.toggleVisible);%0A  %7D,%0A%0A  // %E9%A0%85%E7%9B%AE%E3%81%AE%E3%82%BF%E3%82%A4%E3%83%88%E3%83%AB%E3%82%92%E6%8F%8F%E7%94%BB%0A  render: function () %7B%0A    this.$el.html(this.template(this.model.toJSON()));%0A%0A    this.$el.toggleClass('completed', this.model.get('completed'));%0A    this.toggleVisible();%0A%0A    this.$input = this.$('.edit');%0A    return this;%0A  %7D,%0A%0A  // %E9%A0%85%E7%9B%AE%E3%81%AE%E8%A1%A8%E7%A4%BA%E9%9D%9E%E8%A1%A8%E7%A4%BA%E3%82%92%E5%88%87%E3%82%8A%E6%9B%BF%E3%81%88%E3%82%8B%0A  toggleVisible: function () %7B%0A    this.$el.toggleClass('hidden', this.isHidden());%0A  %7D,%0A%0A  // %E9%A0%85%E7%9B%AE%E3%82%92%E9%9D%9E%E8%A1%A8%E7%A4%BA%E3%81%AB%E3%81%99%E3%81%B9%E3%81%8D%E3%81%8B%E5%88%A4%E5%AE%9A%0A  isHidden: function () %7B%0A    var isCompleted = this.model.get('completed');%0A    return (%0A      (!isCompleted && app.TodoFilter === 'completed') %7C%7C%0A      (isCompleted && app.TodoFilter === 'active')%0A    );%0A  %7D,%0A%0A  /// %E3%83%A2%E3%83%87%E3%83%AB%E3%81%AECompleted%E5%B1%9E%E6%80%A7%E3%82%92%E3%83%88%E3%82%B0%E3%83%AB%0A  togglecompleted: function () %7B%0A    this.model.toggle()
 ;%0A  
@@ -1566,16 +1566,49 @@
 );%0A    %7D
+ else %7B%0A      this.clear();%0A    %7D
 %0A%0A    th
@@ -1770,16 +1770,71 @@
 ;%0A    %7D%0A
+  %7D,%0A%0A  clear: function () %7B%0A    this.model.destroy();%0A
   %7D%0A%7D);%0A

Add edit and remove feature.