はじめに
#4の続きです。
hello worldの削除と、文字の入れ替え（world helloと表示される）の処理を追加します。
main.js
(function($){
Backbone.sync = function(method, model, success, error){
success();
}
var Item = Backbone.Model.extend({
defaults: {
part1: 'hello',
part2: 'world'
}
});
var List = Backbone.Collection.extend({
model: Item
});
var ItemView = Backbone.View.extend({
tagName: 'li',
events: {
'click span.swap': 'swap',
'click span.delete': 'remove'
},
initialize: function(){
_.bindAll(this, 'render', 'unrender', 'swap', 'remove');
this.model.bind('change', this.render);
this.model.bind('remove', this.unrender);
},
render: function(){
$(this.el).html('<span style="color:black;">' + this.model.get('part1') + ' ' + this.model.get('part2') + '</span> <span class="swap" style="font-family:sans-serif; color:blue; cursor:pointer;">[swap]</span><span class="delete" style="cursor:pointer; color:red; font-familiy:sans-serif;">[delete]</span>');
return this;
},
unrender: function(){
$(this.el).remove();
},
swap: function(){
var swapped = {
part1: this.model.get('part2'),
part2: this.model.get('part1')
}
this.model.set(swapped);
},
remove: function(){
this.model.destroy();
}
});
var ListView = Backbone.View.extend({
el: $('body'),
events: {
'click button#add': 'addItem'
},
initialize: function(){
_.bindAll(this, 'render', 'addItem', 'appendItem');
this.collection = new List();
this.collection.bind('add', this.appendItem);
this.counter = 0;
this.render();
},
render: function(){
var self = this;
$(this.el).append("<button id='add'>Add list item</button>")
$(this.el).append("<ul></ul>");
_(this.collection.models).each(function(item){
self.appendItem(item);
}, this);
},
addItem: function(){
this.counter++;
var item = new Item();
item.set({
part2: item.get('part2') + this.counter
});
this.collection.add(item);
},
appendItem: function(item){
var itemView = new ItemView({
model: item
});
$('ul', this.el).append(itemView.render().el);
}
});
var listView = new ListView();
})(jQuery);
コード解説
3~5行目
Backbone.sync = function(method, model, success, error){
success();
}
Backbone.syncはデフォルトでRESTfulなリクエストを実行し、サーバーとモデルの同期を図るための手段を提供しますが、今回サーバーへリクエストは行わないので、ダミーの処理で上書きして必ず成功するようにします。
このチュートリアルだと、51行目の
this.model.destroy();でBackbone.syncが呼ばれます。
21~24行目
events: {
‘click span.swap’: ‘swap’,
‘click span.delete’: ‘remove’
},
swapとremoveのclick時のイベントを設定します。
29~30行目
this.model.bind(‘change’, this.render);
this.model.bind(‘remove’, this.unrender);
changeとremoveはBackbone.jsのイベントです。changeはモデルのプロパティが変更された時、removeはコレクションからモデルが削除された時に発生します。それぞれrenderとunrenderメソッドを設定しています。
Backboneのイベントについてはドキュメントの、Catalog of Events を参照。
33~36行目
render: function(){
$(this.el).html(‘<span style=”color:black;”>’ + this.model.get(‘part1’) + ‘ ‘ + this.model.get(‘part2’) + ‘</span> <span class=”swap” style=”font-family:sans-serif; color:blue; cursor:pointer;”>[swap]</span><span class=”delete” style=”cursor:pointer; color:red; font-familiy:sans-serif;”>[delete]</span>’);
return this;
},
swapクラスとdeleteクラスのspan要素を描画します。swapとdeleteのイベント定義は先ほど21~24行目で行いました。
38~40行目
unrender: function(){
$(this.el).remove();
},
描画位置のhtmlを削除します。deleteがクリックされるとモデルが削除されremoveイベントが発生してこのメソッドが呼ばれます。
42~48行目
swap: function(){
var swapped = {
part1: this.model.get(‘part2’),
part2: this.model.get(‘part1’)
}
this.model.set(swapped);
},
helloとworldを入れ替えてworld hellloにします。またはその逆です。this.mode.set()によって、changeイベントが発生し、renderメソッドが呼ばれて再描画されます。
50~52行目
remove: function(){
this.model.destroy();
}
このビューに設定されているモデルを削除します。removeイベントが発生します。通常destroyによって永続化ストレージからもレコードが削除されますが、3~5行目でsyncをダミー処理で上書きしているので何も起きません。
今回の変更はItemに関するものなので、ListViewの変更はありません。
以上でチュートリアルは終了です。