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。因此，这可能不是解决问题的最佳方法。

JQuery Mobile - 与对话交互

2 个答案: