1.x router

概要

beez.RouterはURLベースのページ遷移機能を提供するシングルトンオブジェクトです。

Backbone.jsのRouterを継承して作られているので、基本的な機能についてはBackbone.Routerを参照してください。

使い方

起動

Routerの機能を有効化するためには、既に生成済みのシングルトンオブジェクトを取得してsetupメソッドを実行します。

var router = beez.manager.router;
router.setup();

そして、hashchangeイベント/pushStateイベントをハンドルするために Backbone.history をスタートさせます。

beez.history.start() // beez.vendor.Backbone.history.start() でも可

ページ遷移

別ページに移動させるにはnavigateメソッドを使用します。

beez.manager.router.navigate('bar', true);

navigateメソッドがハッシュフラグメントを更新し、イベントが発生すれば、後述の設定で示されたControllerが実行される仕組みになっています。

また、第二引数のtrueは実際にイベントを発生させるかどうかを示します。falsyな値の場合ハッシュフラグメントは変更されますがイベントは発生しません。

このnavigateメソッドはBackbone.Router#navigateと同様です。

設定

confディレクトリ配下の設定ファイル上でハッシュフラグメントと対応するControllerメソッドの設定を行います。

この設定はbeez.manager.router.start()を実行した際に反映されます。

• routeは登録するハッシュフラグメントを設定します。/a/:idのように変数を含めることも可能です。
• nameは対応するメソッドを示します。対応するコントローラはrequireで指定します。
• requireは対応するControllerを示します。初回実行時など、controllerが存在しない場合は自動的にrequireされます。 これによりモジュールの遅延ロードを実現します。 newされたControllerはbeez.manager.controllerに後述のxpathの名前で登録されます。
• xpathはbeez.manager.controllerに登録する際のキーを示します。ControllerとそのManagerについてはControllerを参照してください。

routeとnameはBackbone.Router#routeの引数に対応します。

.... // 省略
{
    "release": {
        "entrypoint": "",
        "requirejs": {
            "baseUrl": "",
            "paths": {
            },
            "config": {
                "beez.core": {
                    "router": {                      // routerの設定
                        "menu": {                    // ルート設定名
                            "route": "menu",         // ハッシュフラグメント example) "users/:group(/:id)"
                            "name": "menu",          // コントローラメソッド名
                            "require": "menu/index", // requireするcontrollerモジュール
                            "xpath": "/@/menu"       // manager登録時のpath
                            "async": true            // router hook とControllerの実行を非同期で処理
                        }
                    }
                }
            }
        }
    }
}

設定ファイルの全容はConfigurationを参照してください。

Controller hook @from 1.0.8

Router.navigate経由での、Controller(Method)実行の前後にRouterは処理をフックすることが可能です。

Execution sequence

1. beez.manager.r.navigate(fragments, options)
2. Router.firstBefore()
3. Router.before()
4. Controller.beforeOnce()
5. Controller.before()
6. Controller.{name}()
7. Controller.after()
8. Controller.afterOnce()
9. Router.after()
10. Router.firstAfter()

firstBefore()

Controllerの初回ロード時に実行される

before()

Controllerの初回ロード時と、Controllerロード済みの際に実行される。

after()

Controller実行後に実行される。

firstAfter()

Controllerの初回ロード時に実行される

async: true

Controller hook + Controller.{name} の実行順序を非同期処理で保証します。

Controllerの関数内に非同期処理があるケースでの使用を想定しています。

execution sequence で記載した関数の引数末尾にcallback関数が自動で追加されますので、必ず各関数の処理完了後は、callback を実行し非同期処理してください。

各関数の引数は、省略不可になります。すべて必須で記述してください。

// Router.before
// NG
before: function (data) { ... }
// OK
before: function (data, callback) { callback && callback(); };

// Controller
// > "route": "menu(/:name)(/:desc)",
// NG
menu: function menu(name) {....}
menu: function menu(name, desc) {....}
menu: function menu(name, callback) {....}
// OK
menu: function menu(name, desc, callback) { callback && callback(); };