JavaScript養成読本 特集1 第4章 リスト13 訂正

chapter4_list13.js

var Todo = Backbone.Model.extend({
  defaults: {
    title: '',
    completed: false
  }
});

var TodoView = Backbone.View.extend({
  template: '<label>' +
            ' <input class="toggle" type="checkbox">' +
            ' <span><%= title %></span>' +
            '</label>',
  events: {
    // '.toggle'セレクタで特定できる要素のクリックイベントを
    // 監視してtoggleCompleted()メソッドを呼び出す
    //
    // 内部ではthis.$el.on()が実行されている
    'click. toggle': 'toggleCompleted'
  },
  render: function() {
    var compiled = _.template(this.template);
    var html = compiled(this.model.toJSON());
    this.$el.html(html);
    return this;
  },
  toggleCompleted: function(e) {
    // jQueryのしくみで動いているので引数eは
    // jQueryのイベントオブジェクトを参照している
    console.log('チェックボックスがクリックされました。');
    // コールバック関数のthisは現在のビューインスタンスを指す
    console.log(this instanceof TodoView);
    // => true
  }
});

var todo = new Todo({ title: '牛乳を買う' });

var todoView = new TodoView({
  model: todo
});

$(function() {
  todoView.render().$el.appendTo($(document.body));
});