Как узнать, какая страница загружается с помощью jQuery Mobile?

Question

Как я изучаю JQM, я обнаружил, что JQM не загружает страницы, как это делает обычный браузер. Он просто извлекает содержимое и обновляет DOM.

Когда запрошенные загрузки страницы, JQuery Мобильная анализируют документ для элемент с данными-ролью = «страница» атрибут и вставляют этот код в DOM исходной страницы.

Я смешиваю между физическими страницами и страницами JQM. Страницы загружаются с помощью PHP и мой tempalte код loosk так:

include('views/widgets/head.php'); 
include($view); 
include('views/widgets/footer.php'); 

мнение такое же, как PHP страницы.

Главная страница
URL: mysite.com
Страницы: #frontPage

Page B
URL: mysite.com/page-b
Страницы: #listPage, #infoPage, #mapPage

Страница C
URL: mysite.com/page-c
Страницы: #listPage, #infoPage, #mapPage

Мои текущие решения было обернуть многостраничные в контейнере:

Это могло бы объяснить, почему у меня возникают проблемы с этим кодом :

if($('#frontPage').length > 0) { Lib.setTitle('Front Page'); } 
if($('#pageB').length > 0) { Lib.setTitle('Page B'); } 
if($('#pageC').length > 0) { Lib.setTitle('Page C'); } 

Всякий раз, когда я вернуться обратно к моей первой странице, кажется, первое утверждение срабатывает, то переопределены последним утверждением срабатывает. Я знаю, потому что заголовок мерцает, когда он впервые установлен на «Передняя страница», а затем переопределяется «Страница C».

Возможно, я должен использовать такие события, как pageload, pagebeforeload, pagebeforeshow, но их так много и «похожих», что я не уверен, какой из них использовать.

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

2. Каков правильный код для выполнения глобальных функций для любой загруженной страницы?

Update
Все пользовательские JS файлы загружаются в глобальной/внешний сноске.

Answer 1

Вы можете использовать событие beforeshow в pagecontainer виджета: http://api.jquerymobile.com/pagecontainer/#event-beforeshow

Свойство toPage параметра Ui возвращает объект JQuery страницы вы перемещаетесь к.Затем вы можете проверить его идентификатор и отобразить правильный текст.

$(document).on("pagecontainerbeforeshow", function(event, ui) { 
    var pageid = ui.toPage.prop("id"); 

    if(pageid == 'frontPage') { 
     setTitle('Front Page', ui.toPage); 
    } else if (pageid == 'pageB') { 
     setTitle('Page B', ui.toPage); 
    } else if(pageid == 'pageC') { 
     setTitle('Page C', ui.toPage); 
    } 

}); 

function setTitle(text, page){ 
    page.find(".headerText").text(text); 
} 

DEMO

Это будет запускаться каждый раз при переходе на страницу, чтобы вы могли показать разные названия каждый раз. Если вы только когда-либо показать такое же название, вы можете использовать событие pagecreate вместо как он запускается только один раз, когда каждая страница изначально загружена в DOM:

$(document).on("pagecreate", function(e) {  
    var pageid = e.target.id;  

    if (pageid == 'frontPage') { 
     setTitle('Front Page', pageid); 
    } else if (pageid == 'pageB') { 
     setTitle('Page B', pageid); 
    } else if(pageid == 'pageC') { 
     setTitle('Page C', pageid); 
    }  
}); 

function setTitle(text, pageid){ 
    $("#" + pageid).find(".headerText").text(text); 
} 

DEMO