23

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

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

Router.history.navigate("foo");

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

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

4

4 回答 4

54

我个人已经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 提到的那样，您不必使用哈希/哈希邦黑客，即使对于不支持 pushState 的浏览器也是如此。

于 2012-08-22T22:07:52.077 回答
6

你应该把你的链接写成它们的“正确”地址，也就是说，不要使用散列，这只是绕过特定浏览器的一些缺陷的黑客。为了让这一切正常工作，请附加一个点击处理程序来捕获对这些项目的点击并将 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);
});
于 2012-08-22T22:04:35.660 回答
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();
    }
  }
});
于 2017-09-15T18:56:59.390 回答
1

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

于 2012-08-22T21:57:18.463 回答