Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
30
Help us understand the problem. What is going on with this article?
@yuku_t

Backbone.js入門 「Collection」

More than 5 years have passed since last update.

閲覧上の注意

この記事で対象としているバージョン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
30
Help us understand the problem. What is going on with this article?
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
yuku_t
FLYWHEEL社でソフトウェアエンジニアをしています。昔はIncrements社最初の従業員としてQiitaを開発したりCTOやったりしていました。

Comments

No comments
Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account Login
30
Help us understand the problem. What is going on with this article?