Учетная запись для маршрутов Backbone.js pushState с экспресс-сервером node.js?

Поддержка pushState появилась в обновлении Backbone.js версии 0.5.

Из документации по магистрали:

Обратите внимание, что использование реальных URL-адресов требует, чтобы ваш веб-сервер мог правильно отображать эти страницы, поэтому также требуются внутренние изменения. Например, если у вас есть маршрут /documents/100, ваш веб-сервер должен иметь возможность обслуживать эту страницу, если браузер посещает этот URL-адрес напрямую. Для полной сканируемости поисковой системы лучше всего, чтобы сервер генерировал полный HTML-код для страницы... но если это веб-приложение, просто рендеринг того же содержимого, что и для корневого URL-адреса, и заполнение остального с помощью Backbone. Представления и 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

node.js javascript express pushstate backbone.js
person swaggler    schedule 20.01.2012    source источник

Ответы (1)


arrow_upward
18
arrow_downward

Объяснение

Во-первых, вам нужно знать, что domain.com/#/about вызовет маршрут '/' вашего сервера, потому что он не читает фрагмент #. Ваш сервер будет отображать базу вашего приложения Backbone.js, а Backbone активирует маршрут «о нас».

Итак, вам нужно объявить два маршрута в 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 ссылки для SEO-совместимости с Backbone.js от Дерика Бейли:

person Atinux    schedule 20.01.2012
comment
Отличные ссылки, именно то, что я ищу, спасибо. Я все еще смущен одним аспектом всей этой динамики. Поскольку я включаю серверный маршрут для /about, не означает ли это, что мы теряем преимущества, которые давали нам методы hash и hashbang? Тот факт, что нам не нужно получать весь ответ с сервера. Я не уверен, что понимаю это на 100% правильно. - person swaggler; 20.01.2012
comment
Например, предыдущий хэш-фрагмент #/about будет интерпретирован браузером как запрос к http://domain.com, а затем хэш-фрагмент будет обработан браузером после загрузки содержимого документа по умолчанию для example.com. Эта ситуация возникает только в том случае, если вы скопируете URL-адрес с фрагментом хеша, например, в новую вкладку/окно. Я не могу в совершенстве объяснить по-английски, поэтому рекомендую вам прочитать ссылки и попробовать код, чтобы лучше понять :) - person Atinux; 20.01.2012
comment
Ха-ха, без проблем. Спасибо за разъяснения! - person swaggler; 20.01.2012
comment
Спасибо за ссылки дружище! - person kumarharsh; 14.05.2013