JQuery Mobile: использование data-rel="back" с динамическим генерированием страниц

Question

У меня проблема с перемещением назад по стеку истории в моем мобильном приложении jquery.

По сути, у меня есть три страницы:

1. форма поиска (предварительно встроенный div с ролью страницы. ограниченная навигация: только к странице списка результатов)
2. список результатов (встроенный div с ролью страницы, информация о результатах добавлена ​​через ajax. Навигация возможна на любую страницу записи)
3. страница записи (полностью динамически создается. Неограниченные возможности навигации по соответствующим страницам записи)

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

var page_id = table + record_id;
var pg_html = newPageHTML(page_id );
$('body').append(pg_html);
$.mobile.changePage($("#" + page_id));

после перехода к записи и нажатия кнопки "назад" (data-rel="back") ожидаемое поведение будет состоять в том, чтобы вернуться на предыдущую страницу, будь то другая запись или список результатов, но я отослан полностью вернуться к форме поиска. Это происходит, когда я использую data-dom-cache="true", а когда нет.

Любое объяснение, почему это будет? Спасибо за помощь.

Answer 1

Получить идентификатор предыдущей страницы в DOM и перейти к ней.

Рабочая Демо

$('.selector').on('click', function() {

 // get the ID of the previous page
 var previous = '#' + $.mobile.activePage.prev('div[data-role="page"]')[0].id;

 // move to previous page with reverse effect
 $.mobile.changePage(previous, {
  transition: 'slide',
  reverse: true
 });
});

Answer 2

Хорошо, хорошо, вот как я это исправил. Хотя я не выберу это как ответ, потому что это так далеко от того, как я хотел, чтобы это работало, и кажется очень запутанным.

Проблемы:

1. Невозможно сохранить любые изменения страницы в истории, которые не указывали на настоящую HTML-страницу. Таким образом, подпрыгивание между динамическими страницами отсутствовало.
2. Мне нужен был способ передать мои данные на страницу.html, которая останется в истории, поэтому я пошел с сериализованной строкой в ​​URL, например, строкой GET. Аналогично здесь, но другой, более короткий, более чистый, на который я не могу найти ссылку - Извините! ( Как я могу получить значения строки запроса в JavaScript?)
3. Страницы.html должны были быть разными и обмениваться между собой, чтобы страница перезагрузилась и запустила прослушиватели событий изменения страницы.

Теперь HTML-страницы хранятся и содержат всю информацию, необходимую для перерисовки при нажатии назад.

код для #2 (не мой, большое спасибо тому, кто написал):

$.urlParam = function(name){
    var results = new RegExp('[\\?&]' + name + '=([^&#]*)').exec(window.location.href);
    return results[1] || 0;
}

код для № 3:

// change page
if($('.ui-page-active').attr('id') == "record-a"){
    $.mobile.changePage("p-record-b.html?table=" + content_type + "&id=" + record_id);
}else if($('.ui-page-active').attr('id') == "record-b"){
    $.mobile.changePage("p-record-a.html?table=" + content_type + "&id=" + record_id);
}else{
    $.mobile.changePage("p-record-a.html?table=" + content_type + "&id=" + record_id);
}