Backbone.js入門 その2

こんばんは、south37です。
今日も前回に引き続き、Backbone.jsを勉強していこうと思います。

Events編

さて、今回扱うのはBackboneのEventsです。これは、その名の通りイベントを扱うオブジェクトです。Eventsではイベントの監視(on, listenTo)、解除(off, stopListening)、イベントの発火(trigger)を扱う事が出来て、Backboneの各コンポーネント(ModelやView, Router等)間の依存関係を粗結合にする役割を果たします。
Backboneの仕組みとしては、各コンポーネントがEventsオブジェクトを継承した形で実装されている為、各コンポーネントに対してイベントを設定して行く事になります。実際に例を見てみましょう。

var Memo = Backbone.Model.extend({
    defaults: {
        "content": ""
    },
    validate: function (attrs) {
        if (atts.content === "") {
            return "content must not be empty.";
        }
    }
});
 
var MemoList = Backbone.Collection.extend({
    model:Memo,
    url:"/memos"
});
 
var memoList = new MemoList();

まず、ModelとCollectionを上記の様に定義します*1。次に、作成したModelとCollectionが発行するイベントを監視する為のobserverオブジェクトを作成します。

var observer = {
    showArguments: function () {
        console.log("+++observer.showArguments: ");
        _.each(arguments, function (item, index) {
            console.log("  +++arguments[" + index + "]: " + JSON.stringify(item));
        });
    }
};

_.extend(observer, Backbone.Events);
observer.listenTo(memoList, "all", observer.showArguments);

作成したobserverに対してunderscore.jsのextendでBackbone.Eventsのメソッドを追加し、listenToメソッドでmemoListのイベントを監視します。このとき、listenToの第二引数を"all"にしている為、memoListがどんなイベントを発行してもobserver.showArgumentsが呼び出されます*2。この"all"を特定のイベント名にする事で、特定のイベントを監視する事が出来ます。

Collectionの様々なメソッド呼び出し(add, change, remove等)はイベント発行を伴う為、observerで監視する事が出来ます。

var memo = new Memo({content: "OK"});

memoList.add(memo);
出力
+++observer.showArguments:
  +++arguments[0]: "add"
  +++arguments[1]: {"content":"OK"}
  +++arguments[2]: [{"content":"OK"}]
  +++arguments[3]: {"merge":false,"add":true,"remove":false}

実際に、addメソッド呼び出し時にshowArgumentsが呼び出される事が確認出来ました。

上記の例では、observerに対してlistenToを呼び出してイベント監視の設定をしていましたが、observerを設けずにイベントを発行するオブジェクトそのものにコールバックメソッドをバインドする事も出来ます。その場合にはonメソッド(bindメソッド)を呼び出せばよく、

model.on(event名, callback関数, [context]);

のように設定します。また、イベント監視の解除も出来て、off(unbind)メソッドやstopListeningメソッドを使えばOKです。

今日はここまでです。

*1:validateというのはsaveメソッドを呼び出すと実行されるメソッドで、modelのattributesを引数として実行され、invalidであればエラーメッセージかerrorオブジェクトを返します。上記の例では、modelのcontentがデフォルトの空文字列の場合にエラーメッセージを返すようになっています。

*2:showArgumentsの中で出てくるargumentsというのはJavaScriptが関数実行時にデフォルトで作り出すオブジェクトで、関数に渡された引数が全て配列上に格納されています。argumentsを使う事で、任意の数の引数に対応する関数を定義出来ます。