Программно изменить первую страницу jQuery Мобильные шоу

Question

Моя цель - показать другую первую страницу в зависимости от того, вошел ли пользователь в систему или нет. Проверка входа происходит с использованием синхронного вызова Ajax, результат которого решает, показывать ли диалоговое окно входа в систему или первую пользовательскую страницу.

Обычный способ сделать это - установить $.mobile.autoInitialize = false, а затем инициализировать программно, как описано в ответе this question. По какой-то причине это не сработает, вместо этого другая страница загружается каждый раз.

Я решил отказаться от этого способа и попробовать другой паркур. Теперь я использую местозаполнитель, пустую страницу запуска, которая должна отображаться до тех пор, пока выполняется проверка входа. После проверки входа в систему он должен автоматически измениться. Это делается путем вызова функции, которая выполняет вызов ajax, необходимый для аутентификации на событии pagechange, который вводит эту стартовую страницу. Функция также заботится о переходе на страницу результатов.

Хитрость в том, что это не совсем так. Вместо этого он показывает правильную страницу всего за короткое время, а затем возвращается обратно к заполнителю. Вызов preventDefault в pagechange не помешал этому, как описано в tutorial on dynamic pages. Добавление таймера фиксировало это, что заставило меня думать, что местозаполнитель не был полностью завершен, когда pageshow был уволен (согласно this page на странице событий), или некоторый побочный эффект от начальной загрузки страницы по-прежнему сохраняется.

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

Я использую jQuery Mobile 1.4.0 и jQuery 1.10.2 (1.8.3 до).

EDIT: Ниже приведен код моей последней попытки, прежде чем я разместил здесь вопрос. Он не работает: preventDefault не препятствует переходу на страницу-заполнитель.

$(document).on("pagebeforechange", function(e, data) { 
    if (typeof(data.options.fromPage) === "undefined" && data.toPage[0].id === "startup") { 
     e.preventDefault(); 
     initLogin(); 
    } 
}); 

function initLogin() { 
    // ... Login logic 
    if (!loggedIn) // Pseudo 
     $('body').pagecontainer("change", "#login", {}); 
} 

Answer 1

Если вы используете модель в на несколько страниц, вы можете предотвратить показ любой страницы pagebeforechange события. Это событие срабатывает дважды для каждой страницы, один раз для страницы, которая должна быть скрыта и один раз для страницы, которая должна быть показано; однако на этом этапе изменений не происходит.

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

Что вам нужно для этого объект - это два объекта, .toPage и .options.fromPage. Основываясь на этих значениях свойств, вы решаете, показывать ли первую страницу или сразу перейти на другую.

var logged = false; /* for demo */ 

$(document).on("pagebeforechange", function (e, data) { 

    if (!logged && data.toPage[0].id == "homePage" && typeof data.options.fromPage == "undefined") { 
     /* immediately show login dialig */ 
     $.mobile.pageContainer.pagecontainer("change", "#loginDialog", { 
      transition: "flip" 
     }); 

     e.preventDefault(); /* this will stop showing first page */ 
    } 
}); 

• data.toPage[0].id значение первой страницы в DOM ID.

• data.options.fromPage должно быть undefined так как оно не должно быть перенаправлено с другой страницы в пределах того же webapp.

Demo

Answer 2

Я переживает те же проблемы, описанный на @RubenVereecken, то есть, возвращаясь к исходной странице, как только Канг моей второй странице завершено. Фактически, он задал вопрос «Что заставляет это дополнительное изменение вернуться к начальной странице?» и он еще не ответил. К сожалению, я не знаю причину, так как я не нашел, как работает порядок страниц в JQM-1.4.2, но, к счастью, обходной путь, предложенный @Omar, работает для меня.

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

$(document).on("pagebeforechange", function(event, data) { 
if (typeof (data.toPage) == "string") { 
     if (data.toPage.indexOf("#") == -1 && typeof (data.options.fromPage[0].id) == string") { 
      event.preventDefault();   
     }  
}}); 

Условие data.toPage.indexOf("#") == -1 потому, что я проверил, что вся нежелательная приезжающую-спина к начальной странице происходит, когда свойство «.toPage» было установлено на что-то вроде [http://localhost/.../index.html].