如何决定在 jquery mobile 上首先加载哪个页面?

gus*_*olo 1 jquery-mobile cordova

我正在使用 jquery mobile 和 phonegap (Apache Cordova) 构建一个移动应用程序,问题是首先我需要进行数据库查询,然后再决定要首先加载哪个页面,如果它是“登录”页面或“主页”。

根据 phonegap 文档,我需要绑定“deviceready”事件以了解设备何时准备就绪,然后进行数据库查询。

document.addEventListener("deviceready", onDeviceReady, false);
Run Code Online (Sandbox Code Playgroud)

名为“onDeviceReady”的函数会在未创建数据库的情况下创建数据库,然后对名为“users”的表进行查询,如果有一个或多个用户,我不想显示名为“main.html”的页面,否则为一个页面名为“login.html”。

function onDeviceReady() {
    var db = window.openDatabase("Database", "1.0", "Cordova Demo", 200000);
    db.transaction(populateDB, errorCB, successCB);
}
Run Code Online (Sandbox Code Playgroud)

基本上,问题在于执行此函数时会加载第一页,因为在调用“onDeviceReady”函数之前执行了以下代码:

$(document).bind( "mobileinit", function(){             
    $.mobile.listview.prototype.options.filterPlaceholder = "Buscar...";
    //-> patch for phonegap
    $.mobile.allowCrossDomainPages = true;
    $.mobile.page.prototype.options.backBtnText = "atrás";
});
$( document ).bind( "pagebeforeload", function( event, data ){
    // here i think i would say to phone gap not to load any page until i make the db queries
    //i think i can't make the DB queries here because the "pagebeforeload" is launched before the "deviceready" function
});
Run Code Online (Sandbox Code Playgroud)

如果第一页的代码是按照ASC顺序的DOM来加载这个页面的:

<div data-role="page" id="page-init">
        <div data-role="header" data-theme="c" data-position="fixed">
            <h1>Init page</h1>
        </div><!-- /header -->
    </div>
Run Code Online (Sandbox Code Playgroud)

如果我将页面更改为“main.html”,$.mobile.changePage("main.html");一旦我检查了“users”表上是否有一个或多个用户记录,则首先加载“page-init”页面,然后加载“main.html”,然后我不希望这样,因为用户可以看到一种闪光。我只想在我检查“用户”表后决定首先显示哪个页面。

She*_*ouk 5

我在 stackoverflow 上学到了以下内容,但我再也找不到答案了,所以我会自己回答:

在您的索引末尾:

            $(document).bind("mobileinit", onMobileInit);
            $(document).ready(onPageLoad);
Run Code Online (Sandbox Code Playgroud)

在索引中的任何 JS 文件或脚本标签中:

function onMobileInit() {
    console.log("mobile init");
    $.mobile.autoInitialize = false;
}

function onPageLoad() {// Document.Ready
    console.log("document ready");
    try {
        if(someCondition) {
            document.location.hash = "#profile";
        } else {
            document.location.hash = "#signIn";
        }
    } catch (exception) {

    } finally {
        $.mobile.initializePage();
    }
}
Run Code Online (Sandbox Code Playgroud)

PS,您可以将初始化代码放在其他地方,但加载屏幕会更好,因为它是一个数据库调用,我使用浏览器存储,我认为这要快得多