骨干路由器导航和锚定href答案

【问题标题】：Backbone Router navigate and anchor href骨干路由器导航和锚定href
【发布时间】：2012-08-22 21:47:46
【问题描述】：

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

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

Router.history.navigate("foo");

我相信后者是更好的方法，因为它可以轻松地在 HTML5 的 pushState 功能之间进行迁移。如果我们确实使用 pushState，对于不支持 pushState 的浏览器，Backbone 将能够优雅地降级为 #foo。

由于我还是 Backbone 的新手，是否可以由更有经验和知识渊博的人确认是这种情况？

【问题讨论】：

看看这个：stackoverflow.com/questions/9799977/…

标签： javascript backbone.js

【解决方案1】：

我个人启用了 pushState 并使用 Tim Branyen 的 adding a click handler 的主干样板中采用的方法，该方法将所有链接点击发送到 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 提到的那样，它的优点是您不必使用散列/hashbang hack，即使对于不支持 pushState 的浏览器也是如此。

【讨论】：

反应很好；谢谢。我特别感谢刚刚阅读的 github 参考资料。不知道怎么做，但我有点希望这是我不必编写的样板代码。
如果您将 'app.root' 更改为 'Backbone.history.options.root'，那么它将在当前上下文中没有 'app' 的情况下工作。

【解决方案2】：

你应该把你的链接写成它们的“正确”地址，也就是说，不要使用散列，因为散列只是为了解决特定浏览器的一些缺陷。为了让这一切正常工作，请附加一个点击处理程序来捕获对这些项目的点击并将 URL 传递给 Backbone.history，然后它可以使用 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);
});

【讨论】：

【解决方案3】：

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();
    }
  }
});

【讨论】：

【解决方案4】：

是的，我尝试在我的 Backbone 应用程序中尽可能多地使用 Router.history.navigate。这还有一个好处是，如果用户在浏览器中键入 URL“/foo”，Backbone 会正确路由它。显然，如果它是一个外部链接或您不想用 Backbone 处理的东西，那么您不应该包含它。

【讨论】：