バックボーンルータのナビゲートとアンカーhref

Question

バックボーン対応のアプリケーションでは、アンカーのクリックがバックボーンイベントハンドラによって処理されるうちに、<a href="#foo"></a>を引き続き使用するコードが見られました。私はそれがへとHTML5のpushState機能から簡単に移行することができますので、後者が優れたアプローチであると考えてい

Router.history.navigate("foo"); 

：

また、#fooへのナビゲーションはで処理することができます。また、pushStateを使用すると、backboneはpushStateをサポートしていないブラウザでは正常に#fooになります。

私はまだバックボーンに新しいので、経験豊かで知識のある方がそうであることを確認できますか？

Answer 1

私は個人的にpushStateが有効になっていると、彼らはdata-bypass属性を持っていない限り、navigateに、すべてのリンクのクリックを送信adding a click handlerのティム・Branyenのバックボーン、定型文で撮影したアプローチを使用します。

$(document).on("click", "a:not([data-bypass])", function(evt) { 
    var href = { prop: $(this).prop("href"), attr: $(this).attr("href") }; 
    var root = location.protocol + "//" + location.host + Backbone.history.options.root; 

    if (href.prop && href.prop.slice(0, root.length) === root) { 
    evt.preventDefault(); 
    Backbone.history.navigate(href.attr, true); 
    } 
}); 

このかなりうまく動作します。@nickfのコメントには、pushStateをサポートしていないブラウザでも、ハッシュ/ハッシュバングのハックを使用する必要がないという利点があります。

Answer 2

はい私は、私のバックボーンアプリでできるほど多くのRouter.history.navigateを使用しようとしています。これは、ユーザがブラウザの "/ foo"というURLを入力すると、Backboneが適切にルーティングするという利点があります。外部リンクやBackboneで扱いたくないものがあれば、それを含めるべきではないことは明らかです。

Answer 3

リンクを「適切な」アドレスとして書く必要があります。つまり、ハッシュではなく、特定のブラウザの不具合を回避するためのハックです。それをすべて動作させるには、クリックハンドラをアタッチしてこれらのアイテムのクリックを捕捉し、Backbone.historyにURLを渡します。必要に応じてpushStateを使用するか、hashbangのURLに変換します。たとえば：

$(document).on('click', 'a[href^="/"]', function (event) { 
    // here, ensure that it was a left-mouse-button click. middle click should be 
    // allowed to pass through 
    event.preventDefault(); 
    Backbone.history.navigate(this.href); 
}); 

Answer 4

クリスの答えはすばらしいですが、それに加えてそれをさらに良くするものが1つあります。 Backbone.history.navigate()は実際にそれが内部的に経路指定できるかどうかを示すtrueまたはfalseを返します。そこで我々はdata-bypass属性をスキップして、代わりに次の操作を行うことができます。

$(document).on("click", "a", function(evt) { 
    var href = { prop: $(this).prop("href"), attr: $(this).attr("href") }; 
    var root = location.protocol + "//" + location.host + Backbone.history.options.root; 

    if (href.prop && href.prop.slice(0, root.length) === root) { 
    if (Backbone.history.navigate(href.attr, true)) { 
     evt.preventDefault(); 
    } 
    } 
});