Backbone.jsとハッシュなしのルート

バックボーンで作業しなければならなかったほとんど全員が、これがどんな種類のものか想像してみてください-ルーター。 もちろん、アプリケーションではそれなしでも実行できますが、アプリケーションの使いやすさは大きく失われます。



そのため、ルーターは、ブラウザー行の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つの問題が原因です。

  1. 現在、アプリケーションはURLのどの部分がアドレス自体であるか、どの部分がバックボーンコントローラの名前であるかを認識しません(したがって、デフォルトでは、ドメイン名の後のすべてをこの名前と見なします)。
  2. リンクがハッシュなしの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をお楽しみください。



ご覧のとおり、チュートリアルは非常に初歩的なものでしたが、この問題に関する情報の断片化が原因で私はそれを書きました。



All Articles