以編程方式更改第一頁jQuery Mobile節目

Question

我的目標是根據用戶是否登錄顯示不同的第一頁。 使用同步Ajax調用進行登錄檢查，其結果決定是顯示登錄對話框還是第一個用戶頁面。

執行此操作的常規方法是設置$.mobile.autoInitialize = false ，然后以編程方式初始化， 如此問題的答案中所述。 由於某種原因，這將無法工作，而是每次都會加載另一個頁面。

我決定放棄這種方式嘗試不同的parcour。 我現在使用一個占位符，空的啟動頁面，只要登錄檢查需要顯示。 登錄后檢查它應該自動更改。 這是通過調用一個函數來完成的，該函數在引入此啟動頁面的pagechange事件上執行身份驗證所需的ajax調用。 該功能還負責更改結果頁面。

訣竅在於它不會那樣做。相反，它會在短時間內顯示正確的頁面，然后更改回占位符。 在pagechange調用preventDefault並沒有阻止這種情況，如動態頁面教程中所述。 添加一個計時器修復了這個問題，導致我認為當pageshow被觸發時占位符沒有完全完成（根據頁面上的這個頁面事件），或者初始頁面加載的一些副作用仍然存在。

對於如何解決這個看似微不足道但又很麻煩的問題，我真的很無能為力。 是什么導致這個額外的更改回到初始頁面？ 另外，如果我攔截初始頁面加載的方法是錯誤的，那么正確的方法是什么呢？

我使用jQuery Mobile 1.4.0和jQuery 1.10.2（之前的1.8.3）。

編輯：以下是我在此處發布問題之前的最后一次嘗試的代碼。 它不起作用： 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中的另一個頁面重定向。

演示

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]時，所有不需要的回到初始頁面的時間都發生了[http://localhost/.../index.html] 。