以编程方式更改jQuery Mobile显示的首页 [英] Programmatically change first page jQuery Mobile shows

问题描述

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

My goal is to show a different first page depending on whether the user is logged in or not. The login check happens using a synchronous Ajax call, the outcome of which decides whether to show a login dialog or the first user page.

执行此操作的正常方法是设置$.mobile.autoInitialize = false，然后稍后以编程方式进行初始化，如

The normal way to do this would be to set $.mobile.autoInitialize = false and then later on initialize programmatically, as described in the answer to this question. For some reason this won't work, instead another page gets loaded every single time.

我决定放弃这种方式，尝试其他方法.我现在使用一个占位符，空白的启动页面，该页面应在登录检查之前一直显示.登录检查后，它应该会自动更改.这是通过在引入此启动页面的pagechange事件上调用执行身份验证所需的ajax调用的函数来完成的.该功能还负责切换到结果页面.

I decided to give up on this way and try out a different parcour. I now use a placeholder, empty startup page that should be shown for as long as the login check takes. After the login check it should automatically change. This is done by calling a function that performs the ajax call needed for authentication on the pagechange event that introduces this startup page. The function takes care of changing to the outcome page as well.

窍门是，它并不能完全做到这一点.而是在短时间内显示正确的页面，然后再更改回占位符.如

The trick is that it doesn't quite do that.. Instead it shows the correct page for just a short time, then changes back to the placeholder. Calling preventDefault in pagechange didn't prevent this, as described in the tutorial on dynamic pages. Adding a timer fixed this, leading me to think that the placeholder wasn't quite finished when pageshow got fired (as per this page on page events), or some side-effect of the initial page load still lingered.

对于如何解决这个看似微不足道的繁琐问题，我真的一无所知.是什么导致此额外更改返回到初始页面?另外，如果我截取初始页面加载的方法不正确，那么正确的方法是什么?

I'm really clueless as to how to fix this seemingly trivial, yet burdensome problem. What causes this extra change back to the initial page? Also, if my approach to intercepting the initial page load is wrong, what would be the correct approach instead?

我使用jQuery Mobile 1.4.0和jQuery 1.10.2(之前是1.8.3).

I use jQuery Mobile 1.4.0 and jQuery 1.10.2 (1.8.3 before).

以下是我在此处发布问题之前最后尝试的代码.它不起作用:preventDefault不会阻止转换到占位符页面.

Below is the code to my last try before I posted the question here. It does not work: preventDefault does not prevent the transition to the placeholder page.

$(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", {});
}

推荐答案

我遇到的问题与@RubenVereecken所描述的问题相同，即，当cange转到我的第二页时，会回到初始页完全的.实际上，他提出了一个问题:是什么导致此额外更改返回到初始页面?"尚未得到答复. 不幸的是，我不知道原因，因为我还没有在JQM-1.4.2中找到页面事件顺序的工作原理，但是幸运的是，@ Omar建议的解决方法对我有用.

I'm undergoing the same problem as the one described by @RubenVereecken, that is, a coming back to the initial page once the cange to my second page has completed. In fact, he posed the question "What causes this extra change back to the initial page?" and it hasn't been replied yet. Unfortunately, I don't know the reason since I haven't found how the page-event order works in JQM-1.4.2 yet, but fortunately, the workaround suggested by @Omar is working for me.

这不是完全相同的代码，但是总体思路在防止返回初始页面时起作用.我的代码如下:

It's not exactly the same code but the general idea works at the time of preventing a coming back to the initial page. My code is as follows:

$(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]之类的东西时，我检查了所有不想要的返回到初始页面的情况都发生了.

The condition data.toPage.indexOf("#") == -1 is because I checked that all the undesired coming-backs to the initial page were happening when the property '.toPage' was set to something like [http://localhost/.../index.html].

这篇关于以编程方式更改jQuery Mobile显示的首页的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！