Маршрутизация URL-адресов клиентов

Question

Рассматривая превращение моего приложения ASP MVC в чистый JS / Html, однако это не просто одностраничное приложение, оно имеет несколько страниц, но у каждого есть много ajax и событий.

В любом случае, в настоящее время мойURL-адреса в ASP MVC имеют вид:

/login
/admin/{action}/{adminId}
/posts/{posterId}
/picture/{pictureId}

Так что все легко и просто увидеть, что вы делаете в URL, вы также получаете правильное поведение кнопки возврата.Так что попытка перенести подобные вещи на чистый JS / Html подход кажется очень сложной или невозможной.Мне не нужно точное совпадение, но я надеялся сделать что-то вроде:

http://localhost/myapp/posts/10

Тогда это каким-то образом сможет перенаправить фактический запрос на http://localhost/myapp/posts.html с открытой переменной.Теперь я почти уверен, что это невозможно, так как при вводе вышеизложенного в браузер он попытается просмотреть каталог с именем posts и найти 10, которого не будет.

Теперь я видел Crossroads иLeviRoutes и некоторые другие похожие технологии, однако они, похоже, полагаются на метод hashbang, который некоторые люди, как и другие, ненавидят.Есть ли способ обойти это?Если нет, то кто-нибудь может указать на хорошие уроки по использованию этих фреймворков, поскольку каждый из них выглядит довольно легким по документации.

Answer 1

Нет обходного пути, чтобы не использовать хэш.API истории HTML5 пока недоступен в IE и Opera.Если ваше приложение предназначено для очень конкретной платформы, то вы можете использовать History API вместо хеша.Тем не менее, History API несовместим во всех браузерах.Вы можете прочитать это здесь: http://www.battlehorse.net/page/2011/02/12/html5history.htm

Если вы решите использовать History API, это будет легко.Вы можете использовать любую стратегию маршрутизации, которую вы хотите в ASP.NET MVC, а затем просто сопоставить эту стратегию в JavaScript.Вы можете прочитать больше об History API здесь: https://developer.mozilla.org/en/DOM/Manipulating_the_browser_history

Если вы решите использовать хеш, вам нужно сделать несколько запросов в AJAX-запросах:

• Определить, является ли запроссделано через AJAX:
  • , если GET/posts/{action}/{id} от AJAX, предоставить исходное содержимое
  • , если не от AJAX, перенаправить пользователя на /#!/posts/{action}/{id}.
• Обрабатывайте хэш на стороне клиента, запрашивая правильный контент:
  • Когда хеш-код изменяется на #!/posts/{action}/{id}, GET /posts/{action}/{id} через AJAX и заменяет контент новым с сервера.
• Перехват form.onsubmit событие:
  • Когда форма пытается отправить в /posts/{action}/{id}, отмените ее и используйте AJAX для публикации, а затем замените содержимое новым.с сервера.

Теперь ваше приложение должно работать как одностраничное приложение.

Answer 2

Нет реального способа обойти хэш-банг, если вы хотите, чтобы он был клиентским и кросс-браузерным.