javascript - 以编程方式更改 jQuery Mobile 显示的首页

Question

我的目标是根据用户是否登录显示不同的首页。登录检查使用同步 Ajax 调用进行，其结果决定是否显示登录对话框或第一个用户页面。

执行此操作的正常方法是设置 $.mobile.autoInitialize = false，然后以编程方式初始化，如 this question 的答案中所述。 。由于某种原因，这不起作用，而是每次都会加载另一个页面。

我决定放弃这种方式，尝试另一种方式。我现在使用一个占位符，即空启动页面，只要登录检查进行，该页面就应该显示。登录检查后它应该会自动更改。这是通过调用一个函数来完成的，该函数执行对引入此启动页面的 pagechange 事件进行身份验证所需的 ajax 调用。该函数还负责更改结果页面。

诀窍是它并没有完全做到这一点。相反，它会在短时间内显示正确的页面，然后变回占位符。在 pagechange 中调用 preventDefault 并不能阻止这种情况，如 tutorial on dynamic pages 中所述。 。添加计时器修复了这个问题，让我认为当 pageshow 被触发时占位符还没有完全完成(根据页面事件的 this page )，或者初始页面加载的一些副作用仍然徘徊。

我真的不知道如何解决这个看似微不足道但却很繁重的问题。是什么导致这个额外的更改回到初始页面？另外，如果我拦截初始页面加载的方法是错误的，那么正确的方法是什么？

我使用 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 应该是未定义，因为它不应该从同一网络应用程序中的另一个页面重定向。

Demo