Javascript 骨干路由器导航和锚定href
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12081894/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Backbone Router navigate and anchor href
提问by Evil Nodoer
In a backbone-enabled app, I have seen code that continues to use <a href="#foo"></a>, while the anchor click is handled by a backbone event handler.
在启用了主干的应用程序中，我看到了继续使用 的代码<a href="#foo"></a>，而锚点单击由主干事件处理程序处理。
Alternatively, the navigation to #foo can be handled by:
或者，可以通过以下方式处理到 #foo 的导航：
Router.history.navigate("foo");
I believe the latter is the superior approach because it allows easy migration to and from HTML5's pushState functionality. And if we do use pushState, Backbone would be able to gracefully degrade to #foo for browsers that do not support pushState.
我相信后者是更好的方法，因为它允许轻松迁移到 HTML5 的 pushState 功能或从中迁移。如果我们确实使用 pushState，对于不支持 pushState 的浏览器，Backbone 将能够优雅地降级为 #foo。
As I am still new to Backbone, can someone more experienced and knowledgable confirm that this is the case?
由于我还是 Backbone 的新手，有经验和知识渊博的人可以确认情况确实如此吗？
回答by Chris Salzberg
I personally have pushStateenabled and use the approach taken in Tim Branyen's backbone-boilerplate of adding a click handlerthat sends all link clicks to navigateunless they have a data-bypassattribute:
我个人已经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);
}
});
This works pretty well and as @nickf mentions has the advantage that you don't have to use the hash/hashbang hack, even for browsers that do not support pushState.
这很有效，正如@nickf 提到的那样，您不必使用 hash/hashbang hack，即使对于不支持 pushState 的浏览器也是如此。
回答by nickf
You should write your links as their "proper" addresses, that is, not with the hash which is just a hack to get around some deficiencies of a particular browser. To then make it all work, attach a click handler to catch clicks on these items and pass the urls to Backbone.history, which can then use pushState or convert to a hashbang'd url if needed. For example:
你应该把你的链接写成它们的“正确”地址，也就是说，不要用散列，散列只是为了绕过特定浏览器的一些缺陷。为了让这一切正常工作，请附加一个点击处理程序来捕捉对这些项目的点击，并将网址传递给 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);
});
回答by Pierre Ingmansson
Chris' answer is awesome, but there's one addition to it that makes it even better. Backbone.history.navigate()actually returns true or false telling us if it could route to it internally. We can therefore skip the data-bypassattribute and do the following instead:
克里斯的回答很棒，但还有一个补充使它变得更好。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();
}
}
});
回答by golf
Yes I try to use as much Router.history.navigate as I can in my Backbone apps. This also has the benefit of if the user types in the URL "/foo" in their browser, Backbone routes it properly. Obviously if it is an external link or something you don't want to handle with Backbone then you should not include it.
是的，我尝试在 Backbone 应用程序中尽可能多地使用 Router.history.navigate。这还有一个好处，如果用户在浏览器中输入 URL“/foo”，Backbone 会正确路由它。显然，如果它是外部链接或您不想使用 Backbone 处理的内容，那么您不应该包含它。
