書籍転載:JavaScriptライブラリ実践活用[厳選111]
Backbone.jsのModelを操作し、イベントを購読する
書籍転載の2本目(書籍内の番号は「87」)。Backbone.jsのModelの内部状態を変更するメソッドが呼ばれた際に発生するchangeイベントを購読することで、Modelの状態変更を監視する方法を説明。
書籍転載について
ご注意
本記事は、書籍の内容を改変することなく、そのまま転載したものです。このため用字用語の統一ルールなどは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を返す |
なお、各メソッドにはオプションとして{silent:true} を渡すことができるものがあり、このオプションを指定するとchange イベントの発生を抑制できます(表087-01)。
Modelの主なメソッドとイベント購読を行うサンプルで説明しましょう。Modelの定義はリスト087-01、Modelの使用方法はリスト087-02を参照してください。実行結果画面は図087-02のようになります。
// 1Model定義
var Greeter = Backbone.Model.extend({
// 属性の既定値設定
defaults: {
name: "No Name"
},
// あいさつメソッド
greet: function () {
return "Hell, " + this.get("name");
}
});
|
// あいさつ表示メソッド
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);
|
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」の基礎と基本的な使い方を紹介。