Как вы справляетесь с кнопкой «Назад» в jQuery?

Question

Я просто не могу найти удовлетворительный способ справиться с историей браузера. Конечно, есть прекрасные плагины, такие как History.js , которые отлично работают для небольших вещей. Но позвольте мне привести пример:

У меня есть многостраничная форма, которая запрашивает у пользователя разные вещи. После каждой отправки на следующую страницу (фактически то же самое, она просто меняет представление в зависимости от переменных HTTP-POST), на странице появляются некоторые анимации и изменения:

• основной контент меняется на следующую форму (с slideUp / slideDown)
• индикатор выполнения меняет свое состояние с анимацией
• ниже этой строки, некоторая информация о некоторых входных данных исчезает в

Так что сейчас это довольно просто, но я уже изо всех сил, потому что все анимации (последние 2 части) различны в каждом состоянии (разные div, разные входные источники), и я понятия не имею, как их сделать настолько общий, что я не должен указывать их отдельно.

Хотя я мог бы с этим смириться, но когда пользователь нажимает кнопку «Назад», мне приходится заново определять все эти анимации (в обратном порядке). Конечно, при загрузке содержимого проблем нет, просто файл перезагружается с помощью ajax-load:

• Я выполняю pushstate с входными данными как stateObj при отправке
• чтобы я мог выполнить загрузку содержимого в связанном событии 'changechange'

Как уже говорилось, остальное сводит меня с ума.

Answer 1

Я очень рекомендую захватывать и изучать Backbone.js. Он отлично работает с jQuery и настраивает ваш сайт в измененном шаблоне MVC. Он также имеет отличную систему для обработки изменений URL и выполнения соответствующего кода.

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

Answer 2

Вы можете попробовать JavaScriptMVC , который включает jQuery.Не уверен, что он соответствует вашим точным требованиям, но это JavaScript и MVC ...

Answer 3

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

Вместо того, чтобы анимировать все назад / вперед, когда пользователь нажимает кнопки назад / вперед, я просто перезагружал весь сайт с помощью ajax, чтобы я мог использовать отступление HTML / PHP с stateObj выбранного сайта.

Проблема с History.js заключается в том, что он не может различить pushState и кнопку «назад / вперед» в событии onstatechange. Поэтому я перешел из History.js в стандартное поведение W3C с pushstate. Будет обновление с 1.8.0, которое позволяет различать внутренние и внешние изменения состояний.

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

Answer 4

Хотя не совсем строго MVC (которых есть несколько для JavaScript), я думаю, магистраль js - это отличный фреймворк, основанный на концепциях MVC, но переработанный для лучшего соответствия JavaScriptязык и окружающая среда.