У меня есть мобильный сайт, состоящий из одной HTML-страницы (Mobile.html). Контент загружается динамически в форматированные JQM разделы data-role="page". Единственный статический контент на странице — это тег body; все остальное создается и разрушается по мере того, как пользователь взаимодействует со страницей, которая строит DOM из вызовов веб-службы.
Все это работает очень хорошо, за одним важным исключением. Обработка ссылок нарушена. Как только JQM добавит хэш URL-адреса, обновление и навигация прекратятся. Я тестировал различные решения этой проблемы, и пока ни одно из них не работает.
Используя как ночную сборку JQM, так и версию 1.0A4.1, я упростил проблему до следующего тестового кода:
<body id='CswMobile'>
<div id="StaticPage1" data-role="page" >
<div id="StaticHeader1" data-role="header"><h1>Static Header 1</h1></div>
<div id="StaticContent1" data-role="content">
<ul data-role="listview" data-theme="b">
<li><a href="#StaticPage1">Static Page 1</a></li>
<li><a href="#StaticPage2">Static Page 2</a></li>
<li><a href="#DynamicPageA">Dynamic Page A</a></li>
<li><a href="#DynamicPageB">Dynamic Page B</a></li>
</ul>
</div>
</div>
<div id="StaticPage2" data-role="page">
<div id="StaticHeader2" data-role="header"><h1>Static Header 2</h1></div>
<div id="StaticContent2" data-role="content">
<ul data-role="listview" data-theme="b">
<li><a href="#StaticPage1">Static Page 1</a></li>
<li><a href="#StaticPage2">Static Page 2</a></li>
<li><a href="#DynamicPageA">Dynamic Page A</a></li>
<li><a href="#DynamicPageB">Dynamic Page B</a></li>
</ul>
</div>
</div>
<script type="text/javascript">
$('#StaticPage1').live('tap', function (event) { return onClick(event); });
function onClick(event)
{
var id = $(event.target.outerHTML).attr('href');
var $page = $(id);
if ($page.length === 0) $page = makePage(id);
$page.live('tap', function (event) { return onClick(event); });
$.mobile.changePage($page, 'slide');
return false;
}
function makePage(id)
{
id = id.replace('#', '');
$('body').append('<div id="' + id + '" ' + 'data-role="page">')
var $page = $('#' + id);
$page.append('<div id="Header_' + id + '" ' + 'data-role="header"><h1>Header of ' + id + '</h1>');
var $header = $('#Header_' + id);
$page.append('<div id="Content_' + id + '" ' + 'data-role="content">');
var $content = $('#Content_' + id);
$page.append('<div id="Footer_' + id + '" ' + 'data-role="footer">');
var $li1 = $('<li><a href="#StaticPage1">Static Page 1</a></li>');
var $li2 = $('<li><a href="#StaticPage2">Static Page 2</a></li>');
var $li3 = $('<li><a href="#DynamicPageA">Dynamic Page A</a></li>');
var $li4 = $('<li><a href="#DynamicPageB">Dynamic Page B</a></li>');
var $ul = $('<ul data-role="listview" data-theme="b"></ul>').append($li1).append($li2).append($li3).append($li4);
$content.append($ul);
return $page;
}
</script>
The static content works just as you would expect, but the dynamic content produces unexpected behavior, typically either a 404 error (GET http://localhost/DynamicPageA 404 (Not Found)), or a JQM "Loading..." animation on an invalid URL in the browser address bar (http://localhostDynamicPageA).
Во-первых, я вообще не могу заставить работать обработку ссылок без вызова $.mobile.changePage();. К этому времени новый контент уже находится в DOM, так почему же JQM не может обработать ссылку?
Во-вторых, changePage(), кажется, вводит свои собственные причуды. Двойной щелчок по одному и тому же элементу динамического списка возвращает ошибку 404. Обновление браузера по динамической ссылке возвращает 404.
Как проще всего решить эту проблему с помощью инфраструктуры JQM?
Редактировать:
Добавление атрибута data-url в разделы «страница» решает часть проблемы — обработка ссылок теперь работает при нажатии на динамический контент; однако возврат (с помощью автоматически сгенерированной кнопки «Назад» JQM) и обновление по-прежнему не работают.
- Кнопка «Назад» создает этот URL-адрес: http://localhostdynamicpagea/# с этой ошибкой: «Fiddler: поиск DNS для localhostdynamicpagea не удалось. Такой хост неизвестен». Назад браузера работает просто отлично, поэтому я могу просто нажать кнопку «Назад», чтобы решить эту проблему.
- Обновление браузера на динамической странице по-прежнему создает пустой экран с этой ошибкой журнала консоли: «GET http://localhost/DynamicPageB 0 ()». Я ожидаю обновления страницы по этому URL-адресу: http://localhost/Mobile.html#DynamicPageB для обновления Mobile.html за вычетом динамического хеша.
