考虑使用 Node.js Express 服务器的 Backbone.js PushState 路由？

Question

pushState 支持是在 Backbone.js 的 0.5 版更新中引入的。

来自主干文档：

请注意，使用真实 URL 需要您的网络服务器能够 正确呈现这些页面，因此需要进行后端更改，如下所示 出色地。例如，如果您的路由为 /documents/100，则您的网站 如果浏览器访问该 URL，服务器必须能够提供该页面 直接地。为了获得完整的搜索引擎爬行能力，最好有 服务器为页面生成完整的 HTML ...但如果它是一个 Web 应用程序，只需呈现与您将拥有的相同内容 根 URL，并使用 Backbone Views 和 JavaScript 填充其余部分 工作正常。

这似乎是一个微不足道的问题，但我想知道是否有人可以帮助我解决一些具体问题（最好是 express）node.js 服务器代码。我应该如何处理这些路线？我有点困惑。

以下是我的应用程序的路由器模块的相关摘录：

var Router = Backbone.Router.extend({
    routes: {
        '': 'index',
        'about': 'about'
    },
    index: function() {
        indexView.render();
    },
    about: function() {
        aboutView.render();
    }
});

var initialize = function() {
    var router = new Router;
    Backbone.history.start({ pushState: true });
}

return {
    initialize: initialize
};

我这里只有一个顶级路由和一个关于页面的路由。那么我应该如何设置一个节点服务器来允许我导航到：

domain.com
domain.com/about
domain.com/#/about // <- for browsers that don't support pushState

Answer 1

说明

首先，您需要知道 domain.com/#/about 将调用您服务器的“/”路由，因为它不读取 # 片段。您的服务器将呈现 Backbone.js 应用程序的基础，并且 Backbone 将触发“about”路由。

因此，您需要在 Express JS 中声明两条路由：

• //
• about

Code

app.get('/', function(req, res) {
    // Trigger the routes 'domain.com' and 'domain.com/#/about'
    // Here render the base of your application
});

app.get('/about', function (req, res) {
    // Trigger the route 'domain.com/about'
    // Here use templates to generate the right view and render
});

我向您推荐 Derick Bailey 提供的 3 个与 Backbone.js 兼容的 SEO 链接：

• HTML5 PushState 的 SEO 和可访问性，第 1 部分：PushState 简介：<一href="http://lostechies.com/derickbailey/2011/09/26/seo-and-accessibility-with-html5-pushstate-part-1-introducing-pushstate/" rel="nofollow">http://lostechies.com/derickbailey/2011/09/26/seo-and-accessibility-with-html5-pushstate-part-1-introducing-pushstate/
• SEO HTML5 PushState 的可访问性，第 2 部分：使用 Backbone.js 进行渐进式增强： http://lostechies.com/derickbailey/2011/09/26/seo-and-accessibility-with-html5-pushstate-part-2-progressive-enhancement-with-backbone-js/
• HTML5 PushState 的 SEO 和可访问性，第 3 部分：视频： http:// lostechies.com/derickbailey/2011/10/06/seo-and-accessibility-with-html5-pushstate-part-3-the-video/