バックボーンのルーターはルーティング関数として機能し、URLの方向を制御し、URLで#タグを使用するときに有効になります。
ルーターを定義するには、特定のURLをマップするために少なくとも1つのルーターと関数が必要です。バックボーンでは、#タグの後の任意の文字がルーターによって受信および解釈されることを覚えておく必要があります。
ルーターを定義しましょう。
<Script> var approuter = backbone.router.extend({routes:{"*actions": "defaultroute" // match http://example.com/#anything-here}}); // Instantiate router var app_router = new approuter; app_router.on( 'route:defaultroute'、function(action){alert(action);})// backboneの履歴backbone.history.start(); </script>現在、ルーターを定義しましたが、この時点でルーターは特定のURLと一致しません。次に、ルーターの仕組みを詳細に説明し始めます。
動的ルーティング
Backboneを使用すると、特定のパラメーターを使用してルーターを定義できます。たとえば、URLなどの特定のIDを介して投稿を受信することをお勧めします。このルーターがアクティブになったら、12のIDで投稿を取得できます。次に、このルーターを定義しましょう。
<Script> var approuter = backbone.router.extend({routes:{"posts/:id": "getpost"、 "*actions": "defaultroute" //バックボーンは注文に応じてルートに一致します}}); // Instantiate router var app_router = new approuter; app_router.on( 'route:getpost'、function(id){//パラメーターはここに渡されることに注意してください( "post number" + id);}); app_router.on( 'route:defaultroute'、function(action){alert(action);}); // Backboneの歴史Backbone.history.start(); </script>を開きます一致するルール
Backboneは、2つのフォームの変数を使用して、ルーターの一致するルールを設定します。 1つ目は次のとおりです。これは、URLのスラッシュ間の任意のパラメーターと一致させ、もう1つはスラッシュの背後にあるすべての部分を一致させるために使用されます。 2番目のフォームは最初のフォームよりも曖昧さが大きいため、一致する優先度が最も低いことに注意してください。
あらゆる形式の一致の結果は、パラメーターとして関連する関数に渡されます。最初のルールは1つ以上のパラメーターを返す場合があり、2番目のルールは一致結果全体をパラメーターとして返します。
次に、例を使用して説明しましょう。
ルート:{"posts/:id": "getpost"、// <a href = "http://example.com/#/posts/121">例"loadView"、// <a href = "http://example.com/#/dashboard/graph">ルート/アクションビュー</a>}、app_router.on( 'route:getpost'、function(id){alert(id); //マッチング後、合格したパラメーターは12}); app_router.on(アラート(パス); //マッチング結果全体がパラメーターとして返され、パスはユーザー/イメージ/hey.gif})多くの場合、「ルーター」という言葉を聞くことができますが、多くの場合、ネットワーク接続のナビゲーションとハブであるネットワークデバイス、データ送信を指します。バックボーンの「ルーター」関数はそれに似ています。上記の例からわかるように、対応するアクション法に異なるURLアンカーをナビゲートできます。
(このメカニズムは、多くのサーバー側のWebフレームワークでも提供されていますが、BackBone.Routerは、フロントエンドのシングルページアプリケーションのナビゲーションにもっと焦点を当てています。)
バックボーンのルーティングナビゲーションは、2つのクラスBackBone.RouterとBackBone.Historyによって行われます。
通常、履歴を直接インスタンス化しません。なぜなら、ルーターインスタンスを初めて作成すると、BackBone.Historyを介してアクセスできる歴史のシングルトンオブジェクトを自動的に作成するからです。
ルーティング関数を使用するには、まずルータークラスを定義して、聞く必要があるURLルールとアクションを宣言する必要があります。この例では、定義時にルート属性を介してリッスンされるURLリストを定義します。キーはURLルールを表し、値はURLがこのルールにあるときに実行されるアクションメソッドを表します。
ハッシュルール
URLルールは、現在のURLのハッシュ(アンカーポイント)フラグメントを表します。ルールで一般的な文字列を指定できることに加えて、2つの特別な動的ルールにも注意を払う必要があります。
ルール内の /(スラッシュ)で区切られた文字列は、ルータークラス内の式([^ / //]+)に変換され、 /(スラッシュ)で始まる複数の文字を表します。 :(コロン)がこのルールで設定されている場合、これはURL内のこの文字列がパラメーターとしてアクションに渡されることを意味します。
たとえば、ルールトピック/:idを設定します。アンカーポイントが#トピック/1023の場合、1023はパラメーターIDとしてアクションに渡されます。ルールのパラメーター名(:ID)は、通常、アクションメソッドの正式なパラメーター名と同じです。ルーターにはそのような制限はありませんが、同じパラメーター名を使用して理解しやすいです。
*(アスタリスク)ルール内のルーター内の式(。*?)に変換され、ゼロ以上の文字を表します。 :(コロン)ルールと比較して、 *(アスタリスク)は、上記の例で定義した *エラールールと同様に、 /(スラッシュ)分離制限がありません。
ルーターの *(アスタリスク)ルールは、正規表現に変換された後に非グリーディパターンを使用するため、次のような組み合わせルールを使用できます。
上記は、ルールの定義方法を紹介します。これらのルールは、アクションメソッド名に対応します。これはルーターオブジェクトに含まれている必要があります。
ルータークラスを定義した後、ルーターオブジェクトをインスタンス化し、URLの聴取を開始するbackbone.historyオブジェクトのstart()メソッドを呼び出す必要があります。履歴オブジェクトの内部では、Onhashchangeイベントを使用して、Hash(アンカーポイント)のURLの変更を聞きます。 Onhashchangeイベント(IE6など)をサポートしていないブラウザの場合、HistoryはSetinterval Heartbeatを聴きます。
プッシュステートルール
BackBone.Historyは、PushState URLもサポートしています。 PushStateは、HTML5が提供する新機能です。現在のブラウザのURLを操作できます(アンカーポイントを変更するだけではありません)。ページの更新を引き起こすことはなく、1つのページアプリケーションを完全なプロセスのようにします。
PushState機能を使用するには、この機能についてHTML5が提供するメソッドとイベントの一部を最初に理解する必要があります(これらのメソッドはWindow.historyオブジェクトで定義されています):
1.PushState():この方法では、ブラウザ履歴に新しい履歴エンティティを指定されたURLに追加できます。
2.Replacestate():この方法は、現在の履歴エンティティを指定されたURLに置き換えることができます
PushState()およびLepraceState()メソッドの呼び出しは、現在のページのURLを置き換えるためだけで、実際にはこのURLアドレスに移動しません(背面または前方のボタンを使用する場合、URLにジャンプしません)。 OnPopstateイベントを通じて、これら2つの方法によって引き起こされるURLの変更を聞くことができます。
ルーティング関連方法
1.Route()メソッド
ルーティングルールを設定した後、動的調整が必要な場合は、router.route()メソッドを呼び出して、ルーティングルールとアクションメソッドを動的に追加することができます。
router.route( 'topic/:pageno/:pagesize'、 'page'、function(pageno、pagesize){// todo});ルート()メソッドを呼び出すと、指定されたルールは文字列だけでなく、正規式でもあります。Router.Route(/^topic/(.*?)/(.*?)$$/、 'page'、function(pageno、pagesize){// todo});2.Navigate()メソッド
前の例では、URLルールは手動入力によってトリガーされます。実際のアプリケーションでは、手動でジャンプしてナビゲーションが必要になる場合があります。
router.navigate()メソッドは制御に使用されます。たとえば、router.navigate( 'topic/1000'、{trigger:true});このコードは、URLをhttp://localhost/index.html#topic/1000に変更し、renderdetailメソッドをトリガーします。 2番目のパラメーターのトリガー構成を渡すことに注意する必要があります。これは、URLの変更中に対応するアクションメソッドがトリガーされるかどうかを示すために使用されます。
3.Stop()メソッド
backbone.history.start()メソッドを介してリスニングをルーティングし始めたことを忘れないでください。また、backbone.history.stop()メソッドを呼び出して、リスニングを停止することもできます。
router.route( 'topic/:pageno/:pageize'、 'page'、function(pageno、pagesize){backbone.history.stop();});このコードを実行して、URLにアクセスしてください:http://localhost/index.html#topic/5/20。このアクションが実行された後、リスニングはもはや有効になりません。