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

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

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

2013年5月9日

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

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

書籍転載について

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

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

ご注意

本記事は、書籍の内容を改変することなく、そのまま転載したものです。このため用字用語の統一ルールなどはBuild Insiderのそれとは一致しません。あらかじめご了承ください。

Backbone.jsのModelには既定でいくつか操作用のメソッドが用意されています。また、Modelの内部状態を変更するメソッドが呼ばれた際、changeイベントが発生します。changeイベントを購読することで、Modelの状態変更を監視することができます。

  • 名称: Backbone.js
  • 分類: フレームワーク
  • URL: http://backbonejs.org/
  • 関連ファイル: backbone-0.9.9.js、underscore-1.4.3.js

Modelの操作メソッド

 Backbone.jsのModelには表087-01のような操作用メソッドが既定で用意されています。これらのうち、内部状態を変更するようなメソッドはchange イベントを発生させます(図087-01)。たとえばsetメソッドの場合、setメソッドを呼び出す(1)と、Modelの属性に値を設定し(2)、changeイベントが発生します(3)。

メソッド名呼び出し方説明
set set("属性名", "値", オプション) 属性名を指定して値を設定するとchangeイベントが発生する。オプションに{silent:true}を渡すことで、changeイベントの発生を抑制できる
get get("属性名") 属性名を指定して値を取得する
unset unset("属性名", オプション) 属性名を指定して、値の設定を解除するとchangeイベントが発生する。silentオプションが設定できる
has has("属性名") 属性名を指定すると、その属性が設定されていればtrueを返す
表087-01 Modelの主な既定メソッド
図087-01 Backbone.jsのModelの主なメソッド と イベント発生イメージ
図087-01 Backbone.jsのModelの主なメソッド と イベント発生イメージ

 なお、各メソッドにはオプションとして{silent:true} を渡すことができるものがあり、このオプションを指定するとchange イベントの発生を抑制できます(表087-01)。

 Modelの主なメソッドとイベント購読を行うサンプルで説明しましょう。Modelの定義はリスト087-01、Modelの使用方法はリスト087-02を参照してください。実行結果画面は図087-02のようになります。

JavaScript
// 1Model定義
var Greeter = Backbone.Model.extend({
  // 属性の既定値設定
  defaults: {
    name: "No Name"
  },
  // あいさつメソッド
  greet: function () {
    return "Hell, " + this.get("name");
  }
});
リスト087-01 Model定義(greeter.js)
JavaScript
// あいさつ表示メソッド
function showGreeting(greeter) {
  $("#console").text(greeter.greet());
}

var greeter = new Greeter();

// 2 Modelのchangeイベントを購読
greeter.bind("change", function (greeter) {
  showGreeting(greeter);
});

// 3 Modelへの値設定
$("#set-name").click(function () {
  // changeイベントが発生する
  greeter.set("name", $("#name").val());
});
$("#set-name-silent").click(function () {
  // changeイベントの発生を抑制
  greeter.set("name", $("#name").val(), { silent: true });
});

// 4 Modelから値取得
$("#get-name").click(function () {
  alert(greeter.get("name"));
});

// 5 Modelへの値設定解除
$("#unset-name").click(function () {
  // changeイベントが発生する
  greeter.unset("name");
});

// 6 Modelの属性存在判定
$("#has-name").click(function () {
  alert(greeter.has("name"));
});

showGreeting(greeter);
リスト087-02 Modelの使用方法(backbone.js-2.model.htmlより抜粋)
図087-02 サンプル実行結果
図087-02 サンプル実行結果

 1Model定義では、defaults オプションで名前の規定値を“NoName”としています。そのため、サンプル起動直後は「Hello, No Name」があいさつとして表示されます。

 2では、changeイベント購読としてModel のchange イベントはbindメソッドで購読を行います。

 3Modelへの値設定はsetメソッドを使います。名前変更ボタンをクリックしてsetメソッドを実行するとchange イベントが発生し、入力した名前を使ったあいさつ文表示されます。名前設定(silent)ボタンではsilent オプションを指定しているため、change イベントが抑制され表示は変わりません。

 4Modelからの値取得はgetメソッドを使います。名前設定(silent)ボタンをクリックした後に実行すると、画面の表示は変わらずに値が設定されたことを確認できます。

 5 Model に設定した値を解除するにはunsetメソッドを使います。setメソッドと同様silentオプションを指定しなければchange イベントが発生します。名前設定解除ボタンをクリックすることで、あいさつが「Hello, undefined」となり、名前の設定が解除されることが確認できます。

 6 Model に特定の名前の属性が設定されているかどうかを判定するにはhasメソッドを使います。名前設定有無確認ボタンをクリックすることで、起動直後ならfalse、名前設定後ならtrue、名前設定解除後ならfalseが表示されます。

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

Twitterでつぶやこう!


Build Insider賛同企業・団体

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

ゴールドレベル

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