Question

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

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

Router.history.navigate("foo");

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

由于我还是Backbone的新手，有经验和知识渊博的人可以确认是这样的吗？

Answer 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提到的优点是你不必使用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);
});

Answer 3

克里斯的答案很棒，但是它的一个补充就是让它变得更好。 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <div ng-app="app" ng-controller="myctrl as ctrl" ng-init="ctrl.init()"> </div>实际上返回true或false，告诉我们它是否可以在内部路由到它。因此，我们可以跳过Backbone.history.navigate()属性并执行以下操作：

data-bypass

Answer 4

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

骨干路由器导航和锚点href

4 个答案: