JsViewsのonPropertyChangeイベント

随分と書いてなかった。。。というか、ようやく2013年初エントリ。あけましておめでとうございます。
先日(といっても3ヶ月前)のJsViews入門 - Do You PHP はてなに書いたJsViewsネタです。
JsViewsは、JavaScript側で持っている配列などのデータとテンプレートをリンクさせ、データに変更があったタイミングで自動的に再描画するためのライブラリですが、この時に発生するイベントはonPropertyChangeです。
たとえば、プルダウンとデータをリンクさせていて、項目が選択した時にデータの値を使ってデータを取得し再描画したい場合、プルダウンのonchangeイベントを使うと、リンクしているデータがタイミングによっては変更されていない(完了していない)事があり得ます。この場合、データが変更されたタイミングでイベントが発生してくれれば問題ないはずです。

$(function() {
    // 描画するデータ
    var data = [ ... ];
    $.templates({ linkTemplate: "#template" });
    $.link.linkTemplate("#list", fruits);

    $('#foo').on('click', function() {
        // dataの値を使ってURLを作成し、新しいdataを再読み込み
        // 画面を再描画する
    });
});

ここで、先ほどのonPropertyChangeイベントを使うと、以下の様なコードで期待通りの動作をするようになります。

$(function() {
    var data = [ ... ];
    $.templates({linkTemplate: "#template"});
    $.link.linkTemplate("#list", fruits);

    // dataに対してハンドラを付ける
    $(data).on('propertyChange', function() {
        // dataの値を使ってURLを作成し、新しいdataを再読み込み
        // 画面を再描画する
    });
});