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

问题描述 投票:1回答:3

我正在使用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
});

如果根据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>

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

jquery-mobile cordova
3个回答
5
投票

我在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();
    }
}

P.S。您可以将init代码放在其他位置,但是由于它是数据库调用,因此加载屏幕会更好,我使用浏览器存储,这是我认为更快的方法


1
投票

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


0
投票

[这个问题很旧,但是我可以说,对我来说,只是分配您要document.location.hash的哈希,例如document.location.hash =“ #profile” ;,而无需移动初始化程序就可以正常工作。您需要在运行document.ready()之前执行此操作。

© www.soinside.com 2019 - 2024. All rights reserved.