JQuery Mobile-與對話框交互

Question

我正在為應用程序使用JQuery Mobile。 雖然這是一個很好的框架，但我正在學習一些細微差別。 目前，我有一個兩頁的應用程序。 當用戶導航到第二頁時，我與Web服務進行交互。 如果Web服務返回成功，則加載第二頁。 如果Web服務返回失敗消息，我想向他們顯示一個帶有提示的對話框。 為此，我目前正在執行以下操作：

my.js

$("#page2").live("pageshow", function () {
  var isGood = getResult();
  if (isGood == false) {
    $.mobile.changePage("/myDialog", { role: "dialog" });
  }
  else {
    // Continue loading page2 related information
  }
}); 

目前，這種邏輯幾乎可以按我的需要工作。 出現對話框。 但是，當我關閉它時，“ page2”的“ pageshow”事件再次觸發。 因此，再次加載對話框。 本質上，我有一個無限循環。 我不確定該如何解決。 幾乎就像一個對話框完全獨立於頁面而不是將對話框完全加載到DOM中一樣。 因此，我不確定如何響應對話框事件或與之交互。 我該如何解決？

謝謝

Answer 1

我不確定這是否是最好的方法，但它應該可以工作：

var dialogShown = false;

$("#page2").live("pageshow", function () {
  if(dialogShown)
    return;
  var isGood = getResult();
  if (isGood == false) {
    $.mobile.changePage("/myDialog", { role: "dialog" });
    dialogShown = true;
  }
  else {
    // Continue loading page2 related information
  }
}); 

Answer 2

除了驗證用戶已通過身份驗證對話框外，我做的事情非常相似。 以下代碼塊是我處理此操作方式的關鍵：

(function(){
  // Bind to jQM's page change event
  $(document).on('pagebeforechange', function(e, data) {
    var loadPage = function(){};

    if (typeof data.toPage !== "string") {
      // Continue with normal jQM operation
      return;
    }

    if (data.toPage.match(/skipCheck=1/)) {
      // We have already performed all of our checks.
      // Send the user on to the desired location.
      return;
    }

    loadPage = function() {
      // The user seems to be authorized right now so let's
      // send him on to his desired location.
      $.mobile.changePage(data.toPage + "?skipCheck=1", data.options);
    };

    if (data.toPage.match(/securedPage/)) {
      e.preventDefault(); // Stop the page load until we know more
      MYAPP.addEvent('isLoggedInComplete', loadPage);

      // This is where you would do something in lieu of the
      // the actual page change event.
    }
  });
}());

請注意，我有自己的對象MYAPP ，它具有自己的事件系統。 我使用該對象的事件系統啟動第二頁的加載。

這樣做的關鍵以及對問題的答案是對“ skipCheck”查詢參數的檢查。 這個參數是我目前用來確定是否應該允許頁面加載事件正常完成，或者是否應該攔截它並執行其他操作的參數。

另一個注意事項：該代碼來自開發初期的應用程序。 我正在研究此應用程序時正在學習jQM。 因此，這可能不是解決問題的最佳方法。