閲覧上の注意
この記事で対象としているバージョン0.5.3は結構古いので注意してください。
その他の割りと新しい情報は Backbone.js Advent Calendar 2012 などにあります。
（追記ここまで）
Backbone.js入門の最終回は Router と History です。
Backbone.js入門 「MVC」で述べたように、URL が変更された時に発生する popstate または hashchange イベントを監視してルーチンを起動するのが Router の役目です。History は Router の裏方で頑張る実体で、直接操作することはほとんどありません。
URL が変更された時にアクセスされるのが Router なので、Rails 的な MVC の枠組みで言えばコントローラと言えますし、伝統的な MVC で言えば全てのアンカーとブラウザの進退ボタンを管理するビューだと言えます。View がビューとコントローラの役割を両方もっていたように、Router も両方の役割を負っていると考えるのが自然でしょう。
基本的な使い方
MyRouter = Backbone.Router.extend({
routes: {
"foo/:hoge": "bar" // (1)
},
bar: function (hoge) {
alert(hoge); // (2)
}
});
new MyRouter();
Backbone.history.start();
このような設定があるとき <a href="#foo/hogehoge">foo</a> をクリックすると、URL のハッシュ値が #foo/hogehoge に変更されます。
その上で、(1) に記述されたルールが適応され bar が実行されます。routes にある :hoge という部分に対応する hogehoge が代入されて bar に渡されます。その結果 (2) が実行されて hogehoge とアラートされます。
pushStateを使う
HTML5 の pushState が使えるブラウザではハッシュではなく、pushState を用いたルーティングをするように内部で書き換えることができます。
Backbone.history.start({pushState: true});
この時、どこまでが実際の url でどこからがハッシュ値なのかが分からないため root で教えてやる必要があります。
Backbone.history.start({pushState: true, root: "/hoge/"});
これにより、pushState によって URL が /hoge/foo に変更されるとその際に発生する popstate イベントに反応して (2) が実行されるようになります。
上で使った <a href="#foo/hogehoge"> をクリックすることで popstate をさせたい場合は、jQuery と後述する navigate を使って次のように書くことができます。
router = new MyRouter();
$("a[href^=#]").bind("click", function (e) {
router.navigate($(this).attr("href").substr(1), true);
e.preventDefault();
});
これにより /hoge/foo/hogehoge に URL が変わり、hogehoge と アラートされます。
pushState を有効にすることで、リソースを異なるページで管理しているように見せかけることができるようになりますが、以降でユーザが直接その URL にアクセスしてきたとしても同様のページを表示するようにしなければなりません。
Router#navigate(fragment, [triggerRoute])
明示的にルーティングを変更します。triggerRoute に true を渡すと URL の書き換えと同時に、対応するコールバック関数を実行します。
おわりに
以上で Backbone.js 入門は終わりです。
今回の一連の連載記事で Backbone.js で用いるオブジェクト達の利用方法を一通り見てきました。
これから Backbone.js を使ってみようと思う方の役にたてていれば幸いです。
Backbone.js は世界的に広く使われ始めた JavaScript フレームワークですが、日本ではまだそれほど多くの導入事例があるわけではありません。
一緒に Backbone.js を盛り上げていきましょう！