账户与node.js的前preSS服务器Backbone.js的pushState的路线？ [英] Account for Backbone.js pushState routes with node.js express server?

问题描述

pushState的支持与Backbone.js的0.5版本更新推出。

骨干文档：

  

请注意，使用真实的URL，需要您的Web服务器能
  正确渲染那些页面，因此需要变更为结束后台
  好。例如，如果您有/文件/ 100，您的网络的路由
  服务器必须能够投放页面上，如果浏览器访问这个URL
  直。对于全搜索引擎爬行，最好能有
  服务器生成页面的完整的HTML ...但如果​​它是一个网络
  应用程序，只呈现相同的内容，你将不得不为
  根URL，并填充与骨干视图和JavaScript休息
  正常工作。

这似乎是一个简单的问题，但我不知道是否有人能帮助我与一些特定的（preferably 前preSS ）的node.js 服务器code。我应该如何去处理这些路线？我有点糊涂了。

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

  VAR路由器= Backbone.Router.extend（{
    路线：{
        ''：'指数'，
        关于：关于
    }，
    指数：功能（）{
        indexView.render（）;
    }，
    约：功能（）{
        aboutView.render（）;
    }
}）;VAR初始化函数=（）{
    VAR路由器=新路由器;
    Backbone.history.start（{pushState的：真正}）;
}返回{
    初始化：初始化
};
 

我只对页面的顶层路径和路径用于此处。所以，我应该怎么建立一个节点服务器，将让我浏览到：

  domain.com
domain.com/about
domain.com/#/about //＆下;  - 对于不支持pushState的浏览器
 

解决方案

说明

首先，你要知道， domain.com /＃/约将调用您的服务器的/的路线，因为它不读＃片段。您的服务器会使您的应用程序Backbone.js的和骨干的基地将触发关于路线。

所以，你需要在Ex preSS JS宣布两条路线：

• /


• /约

code

  app.get（'/'，函数（REQ，RES）{
    //触发路线'domain.com'和'domain.com/#/about
    //这会使应用程序的基础
}）;app.get（'/约'，函数（REQ，RES）{
    //触发路线domain.com/about
    //这里使用模板来生成右视图和渲染
}）;
 

我建议你通过德里克贝利Backbone.js的SEO兼容性3个链接：

• SEO以及可以使用HTML5 pushState的，第1部分：介绍pushState的： 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/


• SEO以及可以使用HTML5 pushState的，第3部分：视频： http://lostechies.com/derickbailey/2011/10/06/seo-and-accessibility-with-html5-pushstate-part-3-the-video/

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

From the backbone documentation:

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.

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

解决方案

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.

So, you need to declare two routes in 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
});

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

• SEO And Accessibility With HTML5 PushState, Part 1: Introducing PushState: http://lostechies.com/derickbailey/2011/09/26/seo-and-accessibility-with-html5-pushstate-part-1-introducing-pushstate/
• SEO And Accessibility With HTML5 PushState, Part 2: Progressive Enhancement With Backbone.js: http://lostechies.com/derickbailey/2011/09/26/seo-and-accessibility-with-html5-pushstate-part-2-progressive-enhancement-with-backbone-js/
• SEO And Accessibility With HTML5 PushState, Part 3: The Video: http://lostechies.com/derickbailey/2011/10/06/seo-and-accessibility-with-html5-pushstate-part-3-the-video/

这篇关于账户与node.js的前preSS服务器Backbone.js的pushState的路线？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！