Backbone.Routerを使うと、シングルページのWebアプリケーションで画面遷移を実現できます。

次の4ステップで、Backbone.Routerを使って画面遷移を実現します。

• Backbone.Routerを拡張したクラスを作成する。
• 作成したクラスのインスタンスを作成する。
• 画面遷移のサポートを開始する。
• 画面遷移のリクエストを実行する。

順に見ていきましょう。

Backbone.Routerを拡張したクラスを作成する。

Backbone.Router.extend()で、クラス(コンストラクタ関数)を作ります。引数オブジェクトのroutesで、どのURLパターンの時、どの関数が実行されるかの対応を記述します。

var AppRouter = Backbone.Router.extend({
    routes : {
        "" : "top",
        "main" : "main",
        "item(/:id)" : "showItem"
    },
    top : function() {
        // top画面を表示する処理をここに記述
    },
    main : function() {
        // メイン画面を表示する処理をここに記述
    },
    showItem : function(id) {
        // パスパラメータは引数で渡される
    }
});

(/:id)のように、(/:名前)をつけると、そのセグメントを変数として取り出すことができます。

作成したクラスのインスタンスを作成する。

AppRouterはコンストラクタになるので、これを用いてwindow.onloadあたりでオブジェクトを作成します。

var router;
$(function() {
    router = new AppRouter();
});

画面遷移のサポートを開始する。

Backbone.Routerオブジェクトをnewで作成した後、Backbone.history.start()で画面遷移のサポートを開始します。

var router;
$(function() {
    router = new AppRouter();
    Backbone.history.start();
});

画面遷移のリクエストを実行する

画面遷移は、ではなくBackbone.Routerオブジェクトのnavigate()を呼ぶことで行います。

router.navigate('main', {trigger:true});