Skip to content

Instantly share code, notes, and snippets.

@ykhs
Created October 22, 2014 02:54
Show Gist options
  • Save ykhs/d83ba1e1e4c42cf287be to your computer and use it in GitHub Desktop.
Save ykhs/d83ba1e1e4c42cf287be to your computer and use it in GitHub Desktop.
JavaScript養成読本 特集1 第4章 リスト13 訂正
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));
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment