Магистральный маршрутизатор без хеш-бангов

Я настроил очень простое приложение Backbone с маршрутизатором и двумя представлениями, чтобы попытаться найти правильный способ обработки маршрутизации без хэш-бангов.

var Router = Backbone.Router.extend({
    routes: {
        '': 'index',
        'episodes': 'episodes'
    },

    index: function () {
        var view = new IndexView();
        view.render();
    },

    episodes: function () {
        var view = new EpisodesView();
        view.render();
    }
});

var IndexView = Backbone.View.extend({
    el: $('#primary'),
    render: function () {
        console.log('index view');
    }
});

var EpisodesView = Backbone.View.extend({
    el: $('#primary'),
    render: function () {
        console.log('episodes view');
    }
});

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

Я понимаю, что объект history позволяет перемещаться между страницами вперед и назад, и это здорово. Однако то, как это на самом деле реализовано, кажется мне немного запутанным.

Например, я создал простой сервер MAMP для обслуживания файла index.html и файла JS. При переходе к http://backbone:8888/ консоль регистрирует index view, как я и говорю. Тем не менее, переход к http://backbone:8888/episodes (введя его в адресную строку) возвращает 404. НО, если я перехожу к http://backbone:8888/#episodes, URL-адрес перенаправляется на http://backbone:8888/episodes (без хэш-банга), и я получаю episodes view в консоли, что, очевидно, означает, что он нажимает этот EpisodesView вид.

Отсюда я могу переключаться между индексом и просмотром эпизодов. (обратные удары /, прямые удары / эпизоды). Все в порядке, пока я снова не нажал кнопку «Обновить» на /episodes. 404...

Итак, мой вопрос заключается в следующем: как настроить Backbone для обработки URL-адресов, не полагаясь на хэш-банды? Все, что я нашел по теме, говорит "о просто pushState!". Что ж, я использую pushState, и, как я описал выше, вы не можете напрямую перейти по URL-адресу, такому как /episodes, без получения ошибки 404.


javascript pushstate html5-history backbone.js backbone-routing
person Trevan Hetzel    schedule 30.12.2014    source источник
comment
Это проблема на стороне сервера. Apache, вероятно, ищет index.html в папке Episodes в вашем веб-каталоге. Возможно, вы можете попробовать переписать URL-адрес Apache в свой корневой index.html независимо от того, на какой URL-адрес вы переходите. Вероятно, это не очень хорошее долгосрочное решение, поскольку вы, вероятно, захотите добавить какую-то логику на стороне сервера (Node.JS, Python, Ruby, PHP и т. д.). Затем вам нужно будет решить, хотите ли вы отображать правильную страницу на стороне сервера среди других проблем.   -  person Gohn67    schedule 30.12.2014

Ответы (1)


arrow_upward
1
arrow_downward

Когда вы используете состояние push, страницы обслуживаются из серверной части, а это означает, что вы должны определить соответствующий маршрут в своей серверной части, который соответствует маршруту переднего плана.

Если серверная часть не найдет запрошенный маршрут, она доставит сообщение 404, потому что не будет знать, что обслуживать. В вашем случае представление эпизодов запускается на уровне внешнего интерфейса, но у браузера нет DOM для отображения представления при обновлении страницы, потому что ничего не обслуживалось.

По умолчанию маршрут http://backbone:8888/ будет обслуживать индексный файл, поскольку именно так настроен веб-сервер.
Я не уверен, какую внутреннюю технологию вы используете, но для обслуживания файла с http://backbone:8888/episodes просто убедитесь, что ваша задняя end настроен маршрутизатор, который обслуживает запрошенный маршрут, и он должен работать.

person html_programmer    schedule 31.12.2014