1

我正在使用 phonegap 和 jquery mobile 开发移动原生应用程序。

我在 html 文件中有多个 jquery 移动页面。
在我的 html 文件中，我有：

<script type="text/javascript" charset="utf-8">
// VARIABLES
var db;
// INIT FUNCTION 
function onBodyLoad(){
    document.addEventListener("deviceready", onDeviceReady, false);
}
// ONDEVICE READY FUNCTION
function onDeviceReady(){
    db = window.openDatabase("shopit", "1.0", "SHOPIT DB", 1000000); // RETURN NEW DB OBJECT
    db.transaction(populateDB, onTxError, onTxSuccess); // POPULATE DB WITH SUPERMARKTES + SHOPS + CATEGORIES + PRODUCTS
}

// POPULATE DB
function populateDB(tx) {

   // SUPERMARKETS
    tx.executeSql('DROP TABLE IF EXISTS SUPERMARKETS');
    tx.executeSql('CREATE TABLE IF NOT EXISTS SUPERMARKETS (id, name, imgsrc)');
    tx.executeSql('INSERT INTO SUPERMARKETS (id, name, imgsrc) VALUES (1, "Aldi", "images/supermarkets/aldi.jpg")');
    tx.executeSql('INSERT INTO SUPERMARKETS (id, name, imgsrc) VALUES (2, "Carrefour", "images/supermarkets/carrefour.jpg")');
    tx.executeSql('INSERT INTO SUPERMARKETS (id, name, imgsrc) VALUES (3, "Colruyt", "images/supermarkets/colruyt.jpg")');
    tx.executeSql('INSERT INTO SUPERMARKETS (id, name, imgsrc) VALUES (4, "Delhaize", "images/supermarkets/delhaize.jpg")');
    tx.executeSql('INSERT INTO SUPERMARKETS (id, name, imgsrc) VALUES (5, "Intermarche", "images/supermarkets/intermarche.jpg")');
    tx.executeSql('INSERT INTO SUPERMARKETS (id, name, imgsrc) VALUES (6, "Lidl", "images/supermarkets/lidl.jpg")');
    tx.executeSql('INSERT INTO SUPERMARKETS (id, name, imgsrc) VALUES (7, "Ocool", "images/supermarkets/ocool.jpg")');
    tx.executeSql('INSERT INTO SUPERMARKETS (id, name, imgsrc) VALUES (8, "Okay", "images/supermarkets/okay.jpg")');
    tx.executeSql('INSERT INTO SUPERMARKETS (id, name, imgsrc) VALUES (9, "Smatch", "images/supermarkets/smatch.jpg")');
    tx.executeSql('INSERT INTO SUPERMARKETS (id, name, imgsrc) VALUES (10, "Spar", "images/supermarkets/spar.jpg")');

}
</script>

现在我的问题是：“每次加载页面时都会调用函数'populateDB'吗？我怎样才能改变它只加载一次？”

我的页面在一个 html 文件中的结构如下：

<div data-role="page" id="list">
    <div data-role="header">
        <div data-role="navbar" class="nav-glyphish-example" data-iconpos="bottom">
            <ul>
                <li><a id="currlist" href="#" data-icon="custom" >My list</a></li>
                <li><a id="currlist" href="#" data-icon="custom" >Producten</a></li>
                <li><a id="currlist" href="#" data-icon="custom" >Favorieten</a></li>
                <li><a id="currlist" href="#" data-icon="custom" >Promoties</a></li>
            </ul>
        </div>
    </div>

    <div data-role="content">   
         <ul data-role="listview" id="list"></ul>
    </div>

    <div data-role="footer">
        <h4>SHOP-it Applicatie</h4>
    </div>
</div>

<div data-role="page" id="newlist">
    <div data-role="header">
        <h1>Nieuwe lijst</h1>
    </div>

    <div data-role="content">
        <div data-role="controlgroup" data-type="horizontal">
                <a href="#newlist" onclick="showSupermarkets();" data-role="button" data-theme="b">Supermarkten</a>
                <a href="#newlistshops" onclick="showShops();" data-role="button">Winkels</a>
        </div>  
        <div id="supermarkets">
        </div>
        <a href="#newlist_other" data-role="button">Andere lijst aanmaken</a>
    </div>

    <div data-role="footer">
        <h4>SHOP-it</h4>
    </div>
</div>
4

1 回答 1

1

您可以将它放在第一个 Page 的 PageCreate 事件中。

$("#list").on('pagecreate', function() {
     onBodyLoad();
});
于 2013-09-05T12:18:38.810 回答