Маршрутизация для гибкого одностраничного приложения JavaScript?

Я создаю одностраничное веб-приложение (потому что мне нужна гибкость и скорость при перемещении по страницам/состояниям), но я борюсь с маршрутизацией/URL-адресами...

В традиционной парадигме у меня были бы такие URL-адреса, как:

example.com/tools/population-tool/#currentYear=1950
example.com/tools/income-tool/#country=usa
example.com/nice-story/
example.com/nice-chapter/nice-story/

Теперь я хотел бы заменить его маршрутизатором (например, с использованием Backbone), который загружает шаблоны и контроллеры для соответствующих маршрутов.

Я думаю о том, чтобы иметь объект страниц, в котором хранится необходимая информация о странице:

pages : {
  tools : {
    template : "#tools",
    breadcrumb : ["Home","Tools"]
  }
  nice-story : {
    template : "#nice-story",
    breadcrumb : ["Home","Stories","Nice Story"]
  }  
}

Теперь с помощью маршрутизатора я хотел бы загрузить правильный контент и состояние страницы, учитывая URL-адрес, например:

example.com/#!/tools/population-tool/?currentYear=1950

или вот так, если не используете Hashbang:

example.com/tools/population-tool/?currentYear=1950

Как бы вы организовали эту маршрутизацию, чтобы схема URL-адресов имела смысл, но при этом оставалась гибкой и допускала перенаправления и новые параметры строки запроса?


javascript router backbone.js hashbang
person dani    schedule 18.11.2011    source источник
comment
Я нашел этот магистральный плагин: github.com/jhudson8/backbone-query-parameters. Вы только что подключили его, и вы готовы к работе.   -  person PreslavLe    schedule 06.04.2012

Ответы (1)


arrow_upward
2
arrow_downward

Это не полный ответ на ваш вопрос, но несколько советов по Backbone...

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

Если вы будете использовать строки псевдозапроса, обязательно добавьте для них сопоставитель явно в маршрутах Backbone. Например:

'/tools/population-tool/?*params'

Это вызовет ваше действие маршрута со всей строкой параметров в качестве первого параметра. Вам нужно будет разобрать это...

person maxl0rd    schedule 18.11.2011
comment
Спасибо за ответ! Означало бы это явное перечисление всех страниц в качестве маршрутов? Я бы надеялся, что есть более простое решение, например ':page/:subpage/?*params' ?? Спасибо. - person dani; 18.11.2011
comment
Вы можете сделать это, если хотите. Затем вы просто перемещаете всю свою логику в одну функцию маршрутизации, которая может проверять объект вашей страницы. Я думаю, что более распространенным является определение маршрутов к страницам 1:1, но это зависит от вашего варианта использования. - person maxl0rd; 18.11.2011