骨干路由器导航和锚定href

Backbone Router navigate and anchor href

本文关键字：href 导航 路由器      更新时间：2023-09-26

在一个启用主干网的应用程序中，我看到了继续使用<a href="#foo"></a>的代码，而锚点单击由主干网事件处理程序处理。

或者，#foo的导航可以通过以下方式处理：

Router.history.navigate("foo");

我相信后者是一种优越的方法，因为它允许轻松地迁移到HTML5的pushState功能。如果我们使用pushState，对于不支持pushState的浏览器，Backbone将能够优雅地降级为#foo。

由于我还是Backbone的新手，能有更有经验和知识的人证实这一点吗？

我个人启用了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破解，即使对于不支持pushState的浏览器也是如此。

您应该将链接写为它们的"正确"地址，也就是说，不要使用哈希，这只是为了解决特定浏览器的一些缺陷。为了让这一切正常工作，请附加一个点击处理程序来捕捉这些项目上的点击，并将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);
});

Chris的回答非常棒，但还有一个附加功能使它变得更好。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();
    }
  }
});

是的，我尽量在我的主干应用程序中使用Router.history.navigate。这也有好处，如果用户在浏览器中键入URL"/foo"，Backbone会正确路由它。显然，如果它是一个外部链接，或者是你不想用Backbone处理的东西，那么你就不应该包含它。

相关文章：