以编程方式更改第一页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] 。