Маршрутизация для гибкого JavaScript Single-Page-App? - PullRequest
Новая
       37

Маршрутизация для гибкого JavaScript Single-Page-App?

2 голосов
/ 18 ноября 2011

Я создаю одностраничное веб-приложение (потому что мне нужна гибкость и скорость при перемещении по страницам / состояниям), но я борюсь с маршрутизацией / 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), который загружает шаблоны и контроллеры для соответствующих маршрутов.

I'mдумая о наличии объекта страниц, в котором хранится необходимая информация о странице: 

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

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

example.com / #! / Tools / население-инструмент /? CurrentYear = 1950

или что-то подобное, если не используется Hashbang:

example.com /tools / население-инструмент /? currentYear = 1950

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

1 Ответ

2 голосов
/ 18 ноября 2011

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

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

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

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

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

...