使用 pushState 的 Express 和 Backbone 路由

【问题标题】：Express and Backbone Routing with pushState使用 pushState 的 Express 和 Backbone 路由
【发布时间】：2012-10-04 21:42:36
【问题描述】：

我对这两种技术都很陌生，想知道如何配置我的应用程序的最佳方式。我想没有hastags，只使用pushState。同样从我读到的最好的方法是在渲染服务器端和客户端之间进行混合，但我不确定如何设置它。我已经想出了如何做一个或另一个，但不是一起做。

到目前为止，这是我所在的位置：

快速路线

app.get('/', site.index);
app.get('/product/:id', wiki.show);

在不使用 pushState 的情况下也可以正常工作，但现在如何将两者结合在一起？

【问题讨论】：

标签： backbone.js express

【解决方案1】：

要创建混合客户端/服务器应用程序，您希望客户端和服务器都能够呈现每个视图。当用户访问您的站点时，服务器会呈现视图并将 html 发送给用户。此时，客户端应用程序加载和任何相关链接都应该被拦截并替换为主干导航。

$(document).on('click', 'a:not([data-bypass])', function(e){
  href = $(this).prop('href')
  root = location.protocol+'//'+location.host+'/'
  if (root===href.slice(0,root.length)){
    e.preventDefault();
    Backbone.history.navigate(href.slice(root.length), true);
  }
});

一旦主干应用程序启动，这行代码将捕获所有没有数据绕过属性的锚标记，并在您的客户端应用程序中触发路由功能，而不是将对该页面的请求发送到服务器。添加一个 data-bypass 属性来创建一个不会触发路由函数的链接。

【讨论】：