🧊

0からはじめるBackbone.js Part.3

つぎはCollection編。
またも公式を読み解くよ。

特定の技術を習得するために、ドキュメントを一から全部読む必要はまったくないと思うわけですが、それでも触れる時間を単純に確保できるっていう意味では無駄にはならんかなーと思って。

Backbone.jsのCollection

Collections are ordered sets of models.

というわけで、Modelは単体、それがまとまってCollection。
どちらも相互に参照を持ってて、一心同体である、と。

単にModelの上位概念であり複数形みたいなもんか。

  • extend
  • model
  • constructor / initialize
  • models
  • toJSON
  • sync
  • Underscore Methods (28)
  • add
  • remove
  • reset
  • update
  • get
  • at
  • push
  • pop
  • unshift
  • shift
  • slice
  • length
  • comparator
  • sort
  • pluck
  • where
  • url
  • parse
  • clone
  • fetch
  • create

・・多い！ｗ
けど、なんとなく察しがつくのも多いですね。

Collectionの作成

  • extend
  • model
  • constructor / initialize
var Album = Backbone.Collection.extend({
	model: Song,
	initilize: function(){
		// Init collection.
	}
});


var myAlubum = new Album([mySong1, mySong2, mySong3, mySong4]);

Modelの時とほとんど一緒、ただCollectionはModelの配列を渡して生成。

値の参照

  • models
  • toJSON
  • sync
myAlbum.models; // [mySong1, mySong2, mySong3, mySong4]

Collectionが内包しているModelの配列へのアクセス。
toJSON()はModelの時と同じで、jsonが欲しいならJSON.stringify()で。
sync()も同じ。

Underscore

  • Underscore Methods (28)

Underscore.jsの以下のメソッドが使える。

  • forEach (each)
  • map (collect)
  • reduce (foldl, inject)
  • reduceRight (foldr)
  • find (detect)
  • filter (select)
  • reject
  • every (all)
  • some (any)
  • include (contains)
  • invoke
  • max
  • min
  • sortBy
  • groupBy
  • sortedIndex
  • shuffle
  • toArray
  • size
  • first (head, take)
  • initial
  • rest (tail)
  • last
  • without
  • indexOf
  • lastIndexOf
  • isEmpty
  • chain

配列周りのヘルパーがすごく便利とだけ聞いてるけど、実際使ったことないんですよね・・。

データの操作そのいち

  • add
  • remove
  • reset
  • update
  • get
  • at

add

var newSong = new Song();
myAlbum.add(newSong);
オプションたち
Option example How?
silent {silent:true} addイベントを発火しないように
at {at: 2} 指定の位置に挿入する
merge {merge: true} atで指定した位置にModelが既に存在した場合に更新するか

ちなみに、Modelは自らのidでもって存在を担保してるそうです。

remove

要素の削除。
{silent: true}対応。

reset

var newSong = new Song();
myAlbum.reset(newSong);
// myAlbum.reset(); とすると空のCollectionに

一部の更新ではなく全取っ替えの場合。
実行するとresetイベントが発火。

update

増えたものは増やす、減ったものは減らす、変わったものは更新するという感じ。
それぞれオプションでもって動作をしばれる。

var myAlbum = new Album(mySong1, mySong2, mySong3);
myAlbum.update(mySong1, mySong2, mySong4, mySong5, {
	add: false,
	remove: false,
	merge: false
});

get / at

idで要素を取得するのがget()、indexの順で要素を取得するのがat()。
at()の場合、sortされてない状態だと、sortされてない順に数えて取得されちゃう。

データの操作そのに

ネイティブのArrayっぽいやつ。

  • push
  • pop
  • unshift
  • shift

そのまんま。
push()とunshift()はadd()と同じ、pop()とshift()はremove()と同じオプションの指定が可能。

  • slice
  • length

ほんとにArrayのそのまんま。

データの操作そのさん

  • comparator
  • sort
  • pluck
  • where

comparator / sort

var Album = Backbone.Collection.extend({
	model: Song,
	comparator: function(model){
		return model.get('order');
	}
});

Collectionに要素が追加された際、デフォルトで適応する並び順の指定。
sortで指定するキーを返すか、単純に比較する関数を定義することで指定する。

後から並び順のキーとなる値を変更したとしても、自動で並び直しはしてくれないところに注意。

comparatorを指定している場合、Collectionに要素がaddされると自動でsortされる。
comparatorを指定していない場合は、sort()で並べ替える。

自動でsortさせたくないときは、{sort: false}をadd()の際に指定。

pluck / where

Collectionから特定の配列を抜き出すときに。
Array.map()とArray.filter()みたいなもん。

データの所在系

  • url
  • parse

Modelの時と同じ。
サーバー側のどこに所在があるかを指定する。

parse()も、サーバー側のリソースを丸っと使うのではなく、一旦何か処理を通したい場合に利用。

その他

  • clone
  • fetch
  • create

clone / fetch

Modelの時ととおなじ。

create

Modelを作ってCollectionにAddしてサーバー側に保存・・までを簡単に実行できるものらしい。

所感

Modelの時もそうやったけど、実際にサーバー側とのやりとりを踏まえて設計しないと使えない感じ。
そもそもRESTfullな思想に慣れてないと、ちんぷんかんぷんな予感。

とはいえ、Backbone.jsの真のクライアント側で扱うModelとCollectionについてはだいたいわかった気がする。(気が。)