如何确定首先在jquery mobile上加载哪个页面? [英] How to decide which page to load first on jquery mobile?

问题描述

我正在使用jquery mobile和phonegap(Apache Cordova)构建移动应用程序，问题是，首先，我需要进行数据库查询，然后再确定要首先加载的页面(如果它是登录"页面)或主页".

i'm building a mobile app using jquery mobile and phonegap (Apache Cordova), the problem is that first i need to make a DB query before i decide which page i want to load first, if it's the "login" page or the "main page".

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

Based on the phonegap documentation i need to bind the "deviceready" event to know when the device is ready and then make the DB queries.

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

如果未创建数据库，则名为"onDeviceReady"的函数将创建数据库，然后查询名为"users"的表，并且如果有一个或多个用户，我将不显示名为"main.html"的页面否则为名为"login.html"的页面.

The function called "onDeviceReady" creates the DB if it's not created and then makes a query to a table named "users" and if there is one or more users i wan't to show a page named "main.html" otherwise a page named "login.html".

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

基本上，问题在于在执行此功能时会加载第一页，因为在调用"onDeviceReady"功能之前执行了以下代码:

Basically, the problem is that while this functions are executed the first page is loaded because the following code is executed before the "onDeviceReady" function is called:

$(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的第一页代码被加载，则该页面将被加载:

If the code of the first page according to the DOM in ASC order this page is loaded:

<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. 我只想决定在检查用户"表后首先显示哪个页面.

If i change the page to "main.html" using $.mobile.changePage("main.html"); once i checked if there is one or more user records on the "users" table, the "page-init" page is loaded first and then the "main.html" and i don't want this because the user can se a kind of flash. I just want decided once i checked to the "users" table which page is going to be displayed first.

推荐答案

我在stackoverflow上了解了以下内容，但我找不到答案了，所以我自己回答:

I learned the following here on stackoverflow but i can't find the answer anymore so i will answer it myself:

在索引末尾:

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

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

in any JS file or script tag in index:

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代码放在其他位置，但是加载屏幕会更好，因为它是db调用，我使用浏览器存储，这是我认为更快的方式

P.S. you can put the init code somewhere else, but a loading screen would be better since it is a db call, i use the browser storage which is way way faster i think

这篇关于如何确定首先在jquery mobile上加载哪个页面?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！