使用 node.js express 服务器帐户 Backbone.js pushState 路由? [英] Account for Backbone.js pushState routes with node.js express server?

问题描述

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

pushState support was introduced with Backbone.js' version 0.5 update.

来自主干文档:

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

Note that using real URLs requires your web server to be able to correctly render those pages, so back-end changes are required as well. For example, if you have a route of /documents/100, your web server must be able to serve that page, if the browser visits that URL directly. For full search-engine crawlability, it's best to have the server generate the complete HTML for the page ... but if it's a web application, just rendering the same content you would have for the root URL, and filling in the rest with Backbone Views and JavaScript works fine.

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

This may seem like a trivial question, but I'm wondering if anyone can help me with some specific (preferably express) node.js server code. How should I go about handling these routes? I'm a little confused.

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

Here's the relevant excerpt from my app's router module:

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
};

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

I only have a top-level route and a route for an about page here. So how should I set up a node server that will allow me to navigate to:

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

推荐答案

说明

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

Explanation

First, you need to know that domain.com/#/about will call the '/' route of your server because it doesn't read the # fragment. Your server will render the base of your Backbone.js application and Backbone will trigger the 'about' route.

所以，你需要在 Express JS 中声明两条路由:

So, you need to declare two routes in Express JS:

• /
• /关于

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
});

我向您推荐 3 个链接，用于与 Derick Bailey 的 Backbone.js 的 SEO 兼容性:

I recommend you 3 links for SEO compatibility with Backbone.js by Derick Bailey:

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

这篇关于使用 node.js express 服务器帐户 Backbone.js pushState 路由?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！