LoginSignup
28
29

More than 5 years have passed since last update.

Backbone.js入門 「Collection」

Last updated at Posted at 2012-12-26

閲覧上の注意

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

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

(追記ここまで)


今回は Collection です。
特に難しいことはなくて、複数の Model を扱うためのオブジェクトです。間違っても MVC の C ではないです。

基本的な使い方

真新しさは特にありません。強いていうなら、model に何モデルの集まりを表すものかを指定するくらいです。

var Blog = Backbone.Model.extend({});

var BlogList = Backbone.Collection.extend({
    model: Blog
});

インスタンス生成時にモデルを渡すことで初期化することが可能です。渡すのは Model インスタンスでも、単なるオブジェクトでも構いません。

var blogA = new Blog({text: "foo"});
var blogs = new BlogList([blogA]);

// 以下でも同じ
var blogs = new BlogList([{text: "foo"}]);
var blogA = blogs.models[0];

Collection#models は実際の Model インスタンスが格納されている場所です。

add(models, [options])

モデルを追加します。追加するのは上で書いたインスタンス生成の場合と同じく、 Model のインスタンスでも、オブジェクトでもかまいません。
add イベントが発生します。抑制するには options で silent を true にします。

remove(models, [options])

モデルを削除します。remove イベントが発生するので、抑制するには silent を使います。

reset(models, [options])

モデルを一旦全部削除してから、渡されたモデルで初期化します。reset イベントが発生します。抑制するには silent です。

get(id)

Model#id の値を用いて、Collection の中からモデルオブジェクトを取得します。

each, map, filter, etc.

以下の二つは等価です。

_.each(blogs.models, function (blog) {/* do something */});

blogs.each(function (blog) {/* do something */});

このようなモデルに対する配列操作をするためのショートカットメソッドが複数用意されています。

おわりに

Collection に関しては以上です。
明日は「Model と View と Collectionの連携」です。
今回は特に難しい話題はありませんでしたが、明日は View との連携の中でどのように Collection を扱えばよいかに焦点を当てて解説したいと思います。
それではまた明日。


  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
28
29
1

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
28
29