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

Question

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

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

document.addEventListener("deviceready", onDeviceReady, false);

名为"onDeviceReady“的函数创建数据库(如果没有创建)，然后查询名为" users”的表，如果有一个或多个用户，我不想显示一个名为"main.html“的页面，否则显示一个名为"login.html”的页面。

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

基本上，问题是在执行这些函数时会加载第一个页面，因为以下代码是在调用"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
});

如果第一页的代码按照DOM按ASC顺序加载，则此页将被加载：

<div data-role="page" id="page-init">
        <div data-role="header" data-theme="c" data-position="fixed">
            <h1>Init page</h1>
        </div><!-- /header -->
    </div>

如果我在检查"users“表中是否有一个或多个用户记录时，使用$.mobile.changePage("main.html");将页面更改为"main.html”，则首先加载“page”页面，然后加载"main.html“，我不希望出现这种情况，因为用户可能会看到某种闪光。我只想决定，一旦我检查了“用户”表，哪个页面将首先显示。

Answer 1

我在stackoverflow上学到了以下内容，但我再也找不到答案了，所以我将自己回答：

在索引的末尾：

            $(document).bind("mobileinit", onMobileInit);
            $(document).ready(onPageLoad);

在索引中的任何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();
    }
}

附注:你可以把初始化代码放在别的地方，但是加载屏幕会更好，因为它是一个db调用，我使用浏览器存储，我想这要快得多。

Answer 2

听起来这个问题可以通过加载屏幕来解决。只需创建第一个页面作为加载屏幕，然后检查数据库并根据数据库结果加载正确的页面。您甚至可以添加JQM微调器来告诉您的用户发生了一些事情。

Answer 3

这个问题很老了，但是我可以说，对于我来说，只需将您想要的哈希赋值给配置文件，例如document.location.hash =“# document.location.hash”；，而不需要移动设备的初始化过程。您需要在运行document.ready()之前执行此操作。