書籍転載：JavaScriptライブラリ実践活用［厳選111］
Backbone.jsのCollectionを操作し、イベントを購読する
書籍転載の3本目（書籍内の番号は「88」）。Backbone.jsのCollectionの内部状態を変更するメソッドが呼ばれた際に発生するadd／change／remove／resetなどのイベントを購読することで、Collectionの状態変更を監視する方法を説明。
書籍転載について
ご注意
本記事は、書籍の内容を改変することなく、そのまま転載したものです。このため用字用語の統一ルールなどはBuild Insiderのそれとは一致しません。あらかじめご了承ください。
Backbone.jsのCollectionにもModelと同様、既定でいくつか操作用のメソッドが用意されています。また、Collectionの内部状態を変更するメソッドが呼ばれた際、その操作に応じたイベントが発生します。それぞれのイベントを購読することで、Collectionの状態変更を監視することができます。
- 名称： Backbone.js
- 分類： フレームワーク
- URL： http://backbonejs.org/
- 関連ファイル： backbone-0.9.9.js、underscore-1.4.3.js
Collectionの操作メソッド
Backbone.jsのCollectionには表088-01のような操作用メソッドが既定で用意されています。これらのうち、内部状態を変更するようなメソッドはその操作に応じたイベントを発生させます（図088-01）。たとえばaddメソッドの場合、addメソッドを呼び出す（1）と、Collectionが内部で保持しているmodels フィールドにModel を追加し（2）、addイベントが発生します（3）。
| メソッド名 | 呼び出し方 | 説明 |
|---|---|---|
| add | add(Modelオブジェクト, オプション) | CollectionにModelオブジェクトを追加するとaddイベントが発生する。オプションに{silent:true}を渡すことで、addイベントの発生を抑制できる |
| get | get(Model オブジェクトのid) | 指定したid を持つModelを探して取得する。Model に変更するとModel のchangeイベントがそのままCollectionのchangeイベントとして発生する |
| remove | remove(Model オブジェクト, オプション) | CollectionからModelオブジェクトを削除するとremoveイベントが発生する。オプションに{silent:true}を渡すことで、removeイベントの発生を抑制できる |
| reset | reset(Modelオブジェクトの配列) | 指定したModelオブジェクトの配列でコレクションをリセットするとresetイベントが発生する。オプションに{silent:true}を渡すことで、resetイベントの発生を抑制できる |
なお、各メソッドにはModelと同様にオプションとして{silent:true} を渡すことができるものがあり、このオプションを指定するとイベントの発生を抑制できます。
表088-01 のほか、Collection にはeach メソッドなど、Backbone.js が依存しているUnderscore.js のコレクション列挙メソッドが使えるようになっています。主なものを表088-02にまとめます。
| メソッド名 | 呼び出し方 | 説明 |
|---|---|---|
| each | collection.each(function (item) { ... }) | コレクションの各要素それぞれに対して、引数で指定した関数を実行します。関数の引数にはコレクションの要素が渡されます |
| map | var result = collection.map(function(item) { return ...;}) | コレクションの各要素に対して、引数で指定した関数を実行してその戻り値で新たなコレクションを作成して返します |
| filter | var filterd = collection.filter(function (item) { return ...;}) | コレクションの各要素に対して、引数で指定した判定関数を実行し、判定関数の戻り値が真になる項目で構成された新たなコレクションを返します |
Collectionを使って表示、追加、変更削除を行うサンプルのリストを088-01、実行結果を図088-02に示します。
CollectionのイベントはModelと同様、bindメソッドで購読します。追加、変更、削除、初期化の各処理によって発生するイベント、およびそれを購読する関数の引数に注意し、サンプルを見てみてください。
|
// Modelクラス定義
var Person = Backbone.Model.extend({});
// 1 Collection定義
var People = Backbone.Collection.extend({ model: Person });
// 2 Collectionの内容表示用メソッド群定義
// Collectionの内容表示
function showPeople(people) {
// peopleに含まれるPersonをリスト表示
var $people = $("#people");
$people.empty();
people.each(function (person) {
addPerson(person);
});
}
// 人追加
function addPerson(person) {
var $people = $("#people");
$("<li>")
.text("ID: " + person.get("id")
+ ", 名前: " + person.get("name")
+ ", 年齢: " + person.get("age")
)
.attr("id", "person-" + person.get("id"))
.appendTo($people);
}
// 人変更
function changePerson(person) {
var $person = $("#person-" + person.get("id"));
$person.text("ID: " + person.get("id")
+ ", 名前: " + person.get("name")
+ ", 年齢: " + person.get("age")
);
}
// 人削除
function removePerson(person) {
var $person = $("#person-" + person.get("id"));
$person.remove();
}
// 3 Collectionクラスオブジェクト作成
var people = new People([
new Person({ id: 1, name: "太郎", age: 20 }),
new Person({ id: 2, name: "次郎", age: 18 }),
new Person({ id: 3, name: "三郎", age: 15 })
]);
// 4 Collectionクラスのイベント購読
people.bind("reset", showPeople);
people.bind("add", addPerson);
people.bind("change", changePerson);
people.bind("remove", removePerson);
// 5 Collectionへの項目追加
$("#add").click(function () {
people.add(new Person({
id: $("#id").val(),
name: $("#name").val(),
age: $("#age").val(),
}));
});
// 6 Collectionの項目変更
$("#update").click(function () {
var person = people.get($("#id").val());
person.set("name", $("#name").val());
person.set("age", $("#age").val());
});
// 7 Collectionの項目削除
$("#remove").click(function () {
people.remove($("#id").val());
});
// 8 Collectionのリセット
$("#initialize").click(function () {
people.reset([
new Person({ id: 1, name: "太郎", age: 20 }),
new Person({ id: 2, name: "次郎", age: 18 }),
new Person({ id: 3, name: "三郎", age: 15 })
]);
});
showPeople(people);
|
※以下では、本稿の前後を合わせて5回分（第1回～第5回）のみ表示しています。
連載の全タイトルを参照するには、［この記事の連載 INDEX］を参照してください。
1. MVCパターンでアプリケーションを構築する（Backbone.js）
書籍転載の1本目（書籍内の番号は「86」）。クライアントサイドMVCフレームワークの定番ライブラリの1つ「Backbone.js」の基本的な使い方を解説。
2. Backbone.jsのModelを操作し、イベントを購読する
書籍転載の2本目（書籍内の番号は「87」）。Backbone.jsのModelの内部状態を変更するメソッドが呼ばれた際に発生するchangeイベントを購読することで、Modelの状態変更を監視する方法を説明。
3. 【現在、表示中】≫ Backbone.jsのCollectionを操作し、イベントを購読する
書籍転載の3本目（書籍内の番号は「88」）。Backbone.jsのCollectionの内部状態を変更するメソッドが呼ばれた際に発生するadd／change／remove／resetなどのイベントを購読することで、Collectionの状態変更を監視する方法を説明。
4. Ember.jsでビューとコントローラを紐付け、DOM更新のコードを省略する
書籍転載の4本目（書籍内の番号は「71」）。MVCフレームワークの「Ember.js」の基礎と基本的な使い方を紹介。Ember.jsではテンプレート・エンジンにより、コントローラからのデータを受け取ってHTML出力内容を動的に整形できる。
5. ［AngularJS］HTMLそのものをテンプレートとして動的な表示を実現する
書籍転載の5本目（書籍内の番号は「70」）。HTMLとJavaScriptをシンプルに分離できる、LiteなJavaScriptフレームワークである「AngularJS」の基礎と基本的な使い方を紹介。
