backbone.js - 如何在 Backbone.Router 中使用标准 URL？

Question

根据Backbone.js页面：

直到最近，哈希片段 (#page) 被用来提供这些永久链接，但随着 History API 的到来，现在可以使用标准 URL (/page)。

我尝试添加此路由器规则：

routes: {
  'test': function() {
     alert('ok'); }
}

并调用了Backbone.history.start({pushState: true, root: '/myroot/'}). 我的页面中有一个链接：

<a href="test">test me</a>

我拦截了链接的点击事件：

$('a[href=test]').click(function(e) {
  router.navigate('test');
  e.preventDefault(); });

当我点击链接时，没有发出请求，我相信拦截成功了。但是没有触发事件。

所以，请帮助我了解这是如何History API工作的。或者指出我哪里做错了。

Answer 1

你需要开启pushState：

Backbone.history.start({pushState: true});

您的链接将强制从您的服务器进行完全刷新，并且您的服务器必须响应该 url 的内容。

您需要拦截该链接的点击并告诉您的路由器导航到“测试”路由：

myRouter.navigate("test");

有关 HTML5 历史 API 的更多信息：http: //diveintohtml5.info/history.html

有关将 pushState 与 Backbone 一起使用的一些介绍级别信息：

http://lostechies.com/derickbailey/2011/09/26/seo-and-accessibility-with-html5-pushstate-part-1-introducing-pushstate/

http://lostechies.com/derickbailey/2011/09/26/seo-and-accessibility-with-html5-pushstate-part-2-progressive-enhancement-with-backbone-js/

还有一个我提供的演示视频，涵盖了所有这些：

http://lostechies.com/derickbailey/2011/10/06/seo-and-accessibility-with-html5-pushstate-part-3-the-video/

希望有帮助。

Answer 2

您需要将 {trigger: true} 添加到导航调用以实际触发路由事件。

Answer 3

要表明您希望在应用程序中使用 HTML5 pushStateBackbone.history.start({pushState: true})支持，请使用. 如果您想使用pushState，但浏览器本身不支持它，而是使用全页刷新，您可以添加{hashChange: false}到选项中。

PS！如果您的应用程序不是从/您的域的根 url 提供的，请务必告诉历史根的真正位置，作为一个选项（否则导航将不起作用！）：

Backbone.history.start({pushState: true, root: "/public/search/"})