Edited at

Backbone.js入門 「View と Model と Collection の連携」

More than 5 years have passed since last update.


閲覧上の注意

この記事で対象としているバージョン0.5.3は結構古いので注意してください。

その他の割りと新しい情報は Backbone.js Advent Calendar 2012 などにあります。

(追記ここまで)


Backbone.js入門シリーズも佳境に差し掛かってきました。

ViewModel の連携は既に取り上げたので、今回は特に CollectionView Model との連携に主眼を当てて記述したいと思います。


View と Collection の連携

復習の意味も込めて、ViewModel の連携方法をもう一度記述すると、大枠として次のようになります。

// モデルの定義

Hoge = Backbone.Model.extend({});

// ビューの定義
HogeView = Backbone.View.extend({
events: {
"click .submit": "update" // DOM のイベントを監視
},
initialize: function (options) {
_.bindAll(this, "render", "remove");
// オブザーバパターンを利用してモデルのイベントを購読
this.model.bind("change", this.render);
this.model.bind("destroy", this.remove);
},
update: function () {
this.model.set({foo: "bar"}); // change が発生し、this.render が呼ばれる
},
render: function () {
$(this.el).html(_.template($("#hoge-template").html(), this.model.attributes));
return this;
},
remove: function () {
$(this.el).remove();
return this;
}
});

// モデルのインスタンス
hoge = new Hoge();

// モデルを渡してビューを初期化
hogeView = new HogeView({model: hoge});

ViewModel へのリファレンスを保持していますが Model から見て View はイベントの購読者の一人に過ぎない という関係になっています。

ViewCollection の関係も基本的に同じ構造となります。

HogeList = Backbone.Collection.extend({

model: Hoge
});

HogeListView = Backbone.View.extend({
events: {
"click .add": "addItem"
},
initialize: function (options) {
_.bindAll(this, "resetItems", "appendItem", "removeItem");

this.collection.bind("reset", this.resetItems);
this.collection.bind("add", this.appendItem);
this.collection.bind("remove", this.removeItem);
},
addItem: function () {
var model = new Hoge();
this.collection.add(model); // add イベントが発生し、this.appendItem が呼ばれる
},
resetItems: function (collection) {
collection.each(function (model) {
this.appendItem(model);
}, this);
},
appendItem: function (model) {
var view = new HogeView({model: model});
$(this.el).append(view.render().el);
},
removeItem: function (model) {
model.destroy();
}
});

hogeList = new HogeList();
hogeListView = new HogeListView({collection: hogeList});


Model と Collection の連携

ModelCollection は互いのリファレンスを保持しています。model.collectioncollection.models です。

hoge = new Hoge();

hogeList = new HogeList();

hoge.collection // => undefined
hogeList.models // => []

hogeList.add(hoge);

hoge.collection === hogeList // => true
hogeList.models[0] === hoge // => true

hogeList.include(hoge) // => true

hogeList.remove(hoge);

hoge.collection // => undefined
hogeList.models // => []


おわりに

ユーザの入力によって View のメソッドが呼ばれ、その中で Collection を操作し、その操作の結果生じるイベントによって View の見た目を更新する、という流れになります。これは、ViewModel の連携と同じ流れです。

さて、いよいよ次回最終回は RouterHistory です。

それではまた明日。



  1. Backbone.js入門 Events

  2. Backbone.js入門 MVC

  3. Backbone.js入門 View

  4. Backbone.js入門 Model

  5. Backbone.js入門 ViewとModelの連携

  6. Backbone.js入門 Collection

  7. Backbone.js入門 ViewとModelとCollectionの連携

  8. Backbone.js入門 RouterとHistory