骨干路由器导航和锚点href

Question

在支持骨干的应用程序中,我看到了继续使用的代码<a href="#foo"></a>,而锚点击是由骨干事件处理程序处理的.

或者,导航到#foo可以通过以下方式处理:

Router.history.navigate("foo");

我相信后者是一种优越的方法,因为它允许轻松迁移到HTML5的pushState功能.如果我们确实使用pushState,那么对于不支持pushState的浏览器,Backbone可以优雅地降级为#foo.

由于我还是Backbone的新手,有经验和知识渊博的人可以证实这是事实吗？

Answer 1

我个人已经pushState启用并使用Tim Branyen的主干 - 样板中添加点击处理程序的方法,该处理程序发送所有链接点击,navigate除非他们有一个data-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提到的优点是你不必使用hash/hashbang hack,即使对于不支持pushState的浏览器也是如此.

Answer 2

你应该把你的链接写成他们的"正确"地址,也就是说,不要用哈希来解决特定浏览器的某些缺陷.然后让它全部工作,附加一个单击处理程序来捕获这些项目的点击并将URL传递给Backbone.history,然后可以使用pushState或转换为hashbang'd 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);
});