はじめに
#2の続きです。
モデルとモデルのコレクションを導入します。コレクションへのモデルの追加をビューへ反映させます。
main.js
(function($){ var Item = Backbone.Model.extend({ defaults: { part1: 'hello', part2: 'world' } }); var List = Backbone.Collection.extend({ model: Item }); 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("") $(this.el).append("
コード解説
3~8行目
var Item = Backbone.Model.extend({
defaults: {
part1: ‘hello’,
part2: ‘world’
}
});
Itemモデルの宣言です。
defaultsプロパティは初期値を代入します。
10~12行目
var List = Backbone.Collection.extend({
model: Item
});
Itemモデルのコレクションです。
23~24行目
this.collection = new List();
this.collection.bind(‘add’, this.appendItem);
Listコレクションをインスタンス化し、addイベントにappendItemメソッドをバインドします。
32~38行目
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);
self変数にthis参照を保存しておき、後でコールバック関数の中からアクセスします。
this.collectionのmodelsプロパティはモデルオブジェクトの集合を参照します。
eachはUnderscore.jsのメソッドで、コレクション内のモデルそれぞれに関して、第一引数の関数をコールします。
つまり、this.collection.modelsが空でない場合、格納されているモデルの数だけappendItemメソッドが呼ばれhello worldが追加されます。
40~47行目
addItem: function(){
this.counter++;
var item = new Item();
item.set({
part2: item.get(‘part2’) + this.counter
});
this.collection.add(item);
},
チュートリアル#2では直接hello worldを追加していましたが、今回はモデルのみを扱っています。ビューの更新はaddイベントのリスナーであるappendItem()に委譲します。
49~51行目
appendItem: function(item){
$(‘ul’, this.el).append(“<li>” + item.get(‘part1’) + “ “ + item.get(‘part2’) + “</li>”);
}
appendItem()は、コレクションのaddイベントによって起動し、ビューを更新します。
次のチュートリアルでは、Itemモデルの専用のビューを導入します。