そのため、ルーターは、ブラウザー行のURLに基づいて、使用する機能(コントローラー)を決定します。 または、正確には、ハッシュで。 つまり アプリケーションのインターフェースに次のリンクを設定できます。
<a href="http://myapp.com/catalog/#action1"> - </a>
または
<a href="http://myapp.com/catalog/#action1/42"> - </a>
すべてが完璧に機能しました。 次に、ユーザーはこれらの各リンクを保存し、続いてそれらをクリックして、すぐに目的の機能をアクティブにします。 この素晴らしさの唯一のマイナス点は、記号「#」(ポンド記号)の存在です。 それ自体が悪かったというわけではありませんが、読みやすさと「美しさ」(後列からRESTfulについて何かを教えてくれる)がURLを台無しにしました。
html5の出現前はこれに耐えなければなりませんでした。 新しいhtmlの出現により、ブラウザの閲覧履歴を制御できるようになりました(そしてアドレスバーにURLが表示されるようになりました)。 対応する機能がバックボーンに登場しました(当然、古いブラウザーではフォールバックがサポートされています)。 アプリケーションをファッショナブルでモダンに見せるために使用します。
これに関するドキュメント(およびStackOverflowでさえ)は、単純に次のように述べています。 アプリケーションを起動するときにこれを行います: "
Backbone.history.start({pushState: true})
もちろん、pushStateパラメーター定義を既存のコードに追加するとすぐに、すべてが期待どおりに進みます。 つまり 何も動作しません。 これは、2つの問題が原因です。
- 現在、アプリケーションはURLのどの部分がアドレス自体であるか、どの部分がバックボーンコントローラの名前であるかを認識しません(したがって、デフォルトでは、ドメイン名の後のすべてをこの名前と見なします)。
- リンクがハッシュなしのURLを使用してhrefで指定されている場合、ブラウザは正確にそこに何が必要かを理解せず、指定されたアドレスに移動します(アプリケーションにとっては、せいぜい完全な再起動を意味します)。
最初の問題は比較的簡単に解決できます。 pushStateパラメーターに加えて、 startメソッドにはさらに2つのパラメーターがあります。 特にrootに興味があります。 この例では、テキストの冒頭で、ルーターの起動は次のようになります。
Backbone.history.start({pushState: true, root: "/catalog"})
これで安全に記述できます:
<a href="http://myapp.com/catalog/action1/42"> - </a>
しかし、ページはまだリロード中です。 ドキュメントをさらに読むと、リンクをもう少し複雑にする必要があることがわかります。 例:
<a onclick="Router.navigate("http://myapp.com/catalog/action1/42", {trigger: true} )" href="javascript:"> - </a>
つまり ここで、クリックするたびにアプリケーションの状態を強制的に更新します。 ルーターが呼び出されるように、 トリガーパラメーターを設定することを忘れないでください(アドレスバーのURLを変更しただけではありません)。
ユーザーにリンクをコピーする機能を提供することは残っています。 これを行うには、 history.startの前に呼び出す単純なリンクハンドラー関数を作成します。 id = "backbone"のすべてのリンクに対してこの関数がハングするonclickハンドラーを持っています(ただし、このアプローチの一意性は主張していません)。
<a id="barebone" href="/catalog/action1/42"> - </a>
hrefでは、ルートではなくURLがまだ示されていることを忘れないでください(個人的には、単に "action1 / 42"と書きたいと思っていますが)。 さて、関数自体(jQueryを使用します。jQueryはまったく必要ありません):
var fRouterLinks = function()
{
$("#barebone").click(function(){
Router.navigate($(this).attr("href"), {trigger: true, replace: true} );
return false;
});
}
それだけです 美しいURLをお楽しみください。
ご覧のとおり、チュートリアルは非常に初歩的なものでしたが、この問題に関する情報の断片化が原因で私はそれを書きました。