JQuery Mobile Ajax Navigation в одностраничном шаблоне

Question

Мы разрабатываем приложение JQuery Mobile с использованием RC1 + ASP.NET MVC3.Мой вопрос:

Возможна ли навигация по страницам на основе Ajax с использованием шаблона одной страницы?(как упомянуто здесь: http://jquerymobile.com/demos/1.0rc1/docs/pages/page-template.html)

Я храню $ .mobile.ajaxEnabled = true;и с помощью простого я могу перейти к другой «Единой странице» приложения.У меня мало привязок к событиям, которые нужно выполнить на новой странице (что мы обычно делаем в событии jQuery $ (document) .ready ()), я пытался использовать Pageinit, события pagehow для jQueryMobile, а также событие Ready (), но онипросто не звонят.

Большое спасибо за любую помощь.

Answer 1

Да Навигация по страницам на основе AJAX поддерживается, когда каждый из ваших элементов <div data-role="page"> находится на разных страницах. При навигации jQuery Mobile найдет только первый элемент <div data-role="page"> на странице, добавит его в текущий DOM, а затем оживит его.

Убедитесь, что вы используете .delegate() или .live() для привязки ваших обработчиков событий, поскольку элементы, с которыми вы связываете, не существуют в DOM, пока пользователь не перейдет к ним. Вот пример:

$(document).delegate('[data-role="page"]', 'pageshow', function () {
    alert(this.id + ' --> pageshow');
});

Если вы используете функцию pushState, которая обновляет URL, чтобы не включать хэши (например, www.mywebsite.com/index.html#/dir1/page2.html изменяется на www.mywebsite.com/dir1/page2.html ) Я бы порекомендовал записать весь ваш пользовательский JavaScript во внешний файл .js и включить его на каждой странице. Таким образом, если пользователь обновит браузер или перейдет по ссылке на ваш сайт, он получит весь код, который вы хотите получить от него.

Документация:

• Делегат: http://api.jquery.com/delegate

Answer 2

Вы можете связать вторую единственную страницу, используя обычную ссылку, как описано здесь

http://jquerymobile.com/demos/1.0rc1/docs/pages/page-links.html

В качестве альтернативы вы можете форсировать загрузку страницы с помощью утилиты changePage

$.mobile.changePage( 'secondPage.html', 'slide' );

который задокументирован здесь

http://jquerymobile.com/test/docs/api/methods.html