Простой пример JQuery Address для управления состоянием приложения - PullRequest
Новая
       12

Простой пример JQuery Address для управления состоянием приложения

1 голос
/ 09 декабря 2011

Я использую библиотеку адресов jQuery, чтобы переписать мой URL в зависимости от того, что пользователь делает на странице.Намерение состоит в том, чтобы позволить пользователям делать закладки на страницы и возвращаться позже.Страница никогда не обновляется, так как все взаимодействие с сервером осуществляется через ajax.

jQuery Address пишет URL-адреса примерно так:

http://localhost:9000/#/u/scott_tiger

Мне нужно настроить маршрутв Play, чтобы иметь возможность направить этот запрос через соответствующий контроллер.Поэтому я настроил это: 

GET     /#/u/{username}                Controller.showUser

Это не работает, хотя определение маршрута игнорируется.Я пробовал множество вещей, таких как попытка избежать "#" и заменить его переменной, которую я заполнил с помощью Character.toString (35).Ничего из этого не работает.

Кто-нибудь знает, как я могу правильно определить маршрут или получить адрес jQuery, чтобы не писать "#".

РЕДАКТИРОВАТЬ: "# "не отправляется на сервер, делает это.Doh!Хорошо, вопрос пересмотрен.

Ответы [ 2 ]

9 голосов
/ 09 декабря 2011

Нет. # и часть URL после этого - , а не , отправленная на сервер. Таким образом, ваше игровое приложение на сервере никогда не увидит такие URL.

HTML5 решение

Вам нужно обрабатывать эти URL на стороне клиента, используя JavaScript. В современных браузерах с хорошей поддержкой HTML5 вы можете изменить адрес без перезагрузки страницы. См. Управление историей браузера о том, как это сделать для этих браузеров. И смотрите Когда я могу использовать ... для поддержки браузера.

# - URL-адресов

В Internet Explorer и более старых версиях других браузеров вам необходимо использовать # URL-адреса и использовать JavaScript для загрузки состояния (например, получить страницу пользователя /u/scott_tiger в вашем примере). См. Как запустить функцию JavaScript, когда пользователь посещает хеш-ссылку (#something) с помощью JQuery? , чтобы узнать, как это сделать в JavaScript. Также, если пользователь добавляет в закладки страницу с # -URL, вам необходимо перезагрузить состояние.

См. Также: Для чего нужен шебанг / хэшбанг (#!) В Facebook и новые URL Twitter?

библиотеки JavaScript

Вы можете использовать библиотеки JavaScript, чтобы справиться с этим history.js - пример. Также обрабатываются большие рамки, такие как Backbone.js.

Кто-нибудь знает, как я могу получить jQuery Address, чтобы не писать "#".

Если вы не напишите # -часть URL, состояние не может быть связано. Таким образом, вы не можете вернуться к, например. Страница профиля Скотта Тигра, если вы добавите страницу в закладки, потому что URL-адрес всего лишь http://localhost:9000/, и вы попадете на первую страницу, а пользователь, хотя и появится на странице профиля.

2 голосов
/ 20 декабря 2011

Вооружившись моим новым пониманием URL (спасибо @Jonas), я понял, что пропустил половину истории.

Я использую JQuery Address для изменения URL в зависимостина что вы нажимаете в приложении.Это прекрасно работает и на многих браузерах.Чего мне не хватало, так это использования JQuery Address для отслеживания изменений внешних адресов (закладок, истории, назад / вперед) и соответствующих ответов.т.е. правильно настроить страницу, запуская соответствующие вызовы Ajax и обрабатывая эти данные соответствующим образом.

Изменение адреса 

$.address.title("new title describing application state");
$.address.parameter("q", "val1");
$.address.parameter("g", "val2");
$.address.update();

Восстановление состояния 

$.address.externalChange(function(event) {
    var val1 = event.parameters["q"];
    var val2 = event.parameters["g"];
    // do something with those values
});
...