書籍転載:JavaScriptライブラリ実践活用[厳選111]

書籍転載:JavaScriptライブラリ実践活用[厳選111]

Backbone.jsのCollectionを操作し、イベントを購読する

2013年5月16日

書籍転載の3本目(書籍内の番号は「88」)。Backbone.jsのCollectionの内部状態を変更するメソッドが呼ばれた際に発生するadd/change/remove/resetなどのイベントを購読することで、Collectionの状態変更を監視する方法を説明。

WINGSプロジェクト 高野 将
  • このエントリーをはてなブックマークに追加

書籍転載について

 本コーナーは、技術評論社発行の書籍『JavaScriptライブラリ実践活用[厳選111]』の中から、特にBuild Insiderの読者に有用だと考えられる項目を編集部が選び、同社の許可を得て転載したものです。

 『JavaScriptライブラリ実践活用[厳選111]』の詳細や購入は技術評論社のサイト目次ページをご覧ください。

ご注意

本記事は、書籍の内容を改変することなく、そのまま転載したものです。このため用字用語の統一ルールなどは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イベントの発生を抑制できる
表088-01 Collectionの主な既定メソッド
図088-01 Backbone.jsのCollectionの主なメソッドとイベント発生イメージ
図088-01 Backbone.jsのCollectionの主なメソッドとイベント発生イメージ

 なお、各メソッドには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 ...;}) コレクションの各要素に対して、引数で指定した判定関数を実行し、判定関数の戻り値が真になる項目で構成された新たなコレクションを返します
表088-02 Collectionの主なコレクション列挙メソッド

 Collectionを使って表示、追加、変更削除を行うサンプルのリストを088-01、実行結果を図088-02に示します。

 CollectionのイベントはModelと同様、bindメソッドで購読します。追加、変更、削除、初期化の各処理によって発生するイベント、およびそれを購読する関数の引数に注意し、サンプルを見てみてください。

JavaScript
// 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);
リスト088-01 Collectionの操作とイベント購読
図088-02 追加ボタンクリック後
図088-02 追加ボタンクリック後

※以下では、本稿の前後を合わせて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」の基礎と基本的な使い方を紹介。

イベント情報(メディアスポンサーです)

Azure Central の記事内容の紹介

GrapeCity Garage 記事内容の紹介

Twitterでつぶやこう!


Build Insider賛同企業・団体

Build Insiderは、以下の企業・団体の支援を受けて活動しています(募集概要)。

ゴールドレベル

  • グレープシティ株式会社
  • 日本マイクロソフト株式会社