Backbone Router导航和锚点href

Question

在一个启用了backbone的应用中，我看到了一些代码仍然使用 <a href="#foo"></a>，而锚点的点击是由backbone事件处理程序处理的。

另外，#foo 的导航也可以通过以下方式处理：

Router.history.navigate("foo");

我相信后者是更优秀的方法，因为它允许轻松迁移至HTML5的pushState功能，而且如果我们使用pushState，Backbone将能够优雅地降级到#foo，以适应不支持pushState的浏览器。

由于我对Backbone仍然很陌生，所以是否有更有经验和知识的人能够确认这一点呢？

- Evil Nodoer

---

查看这个链接：https://dev59.com/o2kw5IYBdhLWcg3wkLb2 - schacki

Answer 1

我个人已启用pushState并采用Tim Branyen的backbone-boilerplate中的方法，在添加点击处理程序时，除非链接具有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所提到的那样，它有一个优点，即使对于不支持pushState的浏览器，您也不必使用哈希/哈希马甲hack。

- Chris Salzberg

---

非常感谢您的出色回复。我特别感谢您提供的 Github 参考资料，我刚刚阅读了它。虽然不确定如何实现，但我有点希望这是一些我不必自己编写的样板代码。 - Evil Nodoer

如果你将'app.root'改为'Backbone.history.options.root'，那么它可以在当前上下文中没有'app'的情况下工作。 - Sean Hagen

Answer 2

您应该将链接编写为其“正确”的地址，即不要使用哈希标记，这只是一种解决特定浏览器缺陷的方法。然后，附加一个点击处理程序来捕获这些项目上的单击并将URL传递给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);
});

- nickf

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

- Pierre Ingmansson

Answer 4

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

- golf