JQuery Mobile-与对话框交互

JQuery Mobile - Interacting with a Dialog

本文关键字：交互 对话框 Mobile- JQuery      更新时间：2023-09-26

我正在为应用程序使用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中，而不是与页面相关。正因为如此，我不知道如何回应对话事件或与之互动。我该如何解决这个问题？

感谢

我不确定这是否是最好的方法，但它应该有效：

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
  }
});

我做了一些非常类似的事情，只是验证用户是否通过了身份验证对话框。以下代码块是我处理此操作的关键：

(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。因此，这可能不是处理问题的最佳方式。

相关文章：