23

<a href="#foo"></a>バックボーン対応アプリで、アンカー クリックがバックボーン イベント ハンドラーによって処理されている間、引き続き を使用するコードを見てきました。

または、 #foo へのナビゲーションは次の方法で処理できます。

Router.history.navigate("foo");

HTML5 の pushState 機能との間で簡単に移行できるため、後者が優れたアプローチだと思います。また、pushState を使用する場合、Backbone は、pushState をサポートしていないブラウザーに対して、正常に #foo に劣化することができます。

私はまだ Backbone に慣れていないので、より経験が豊富で知識のある誰かがこれが事実であることを確認できますか?

4

4 に答える 4

54

私は個人的にpushState、Tim Branyenのバックボーンボイラープレートで採用されている、属性がない限りすべてのリンククリックを送信するクリックハンドラーを追加するアプローチを有効にして使用しています。navigatedata-bypass

$(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をサポートしていないブラウザーでも、ハッシュ/ハッシュバンハックを使用する必要がないという利点があります。

于 2012-08-22T22:07:52.077 に答える
6

リンクは「適切な」アドレスとして記述する必要があります。つまり、特定のブラウザのいくつかの欠陥を回避するための単なるハックであるハッシュを使用しないでください。次にすべてを機能させるには、クリックハンドラーをアタッチしてこれらのアイテムのクリックをキャッチし、URLをBackbone.historyに渡します。Backbone.historyは、pushStateを使用するか、必要に応じてハッシュバンの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);
});
于 2012-08-22T22:04:35.660 に答える
1

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

于 2012-08-22T21:57:18.463 に答える