1

PhoneGap + jQuery Mobile で非常にシンプルなアプリを作成しています。目的は、PhoneGap アプリケーションの作成に自信を持つことです。

このアプリは非常にシンプルです。ナビゲーションバー付きの HomePage があります。ナビゲーション バーには、連絡先、カレンダー、ドキュメントの 3 つのボタンがあります。

ボタンは、要素内の 3 つのタブを管理します<div data-role="content">。これらの 3 つのタブを非表示にしました。ユーザーがナビゲーションバーをタップすると、タブを正しくナビゲートできます。

ここで、問題: 最初のタブに連絡先を正常にロードしましたが、そこに移動すると、仕切りしか表示されません! 代わりに、ホームの [連絡先] タブを非表示にしないと、連絡先が正しく表示されます。ユーザーがまだホームページにいる間にすべてのデータをロードしたいと思います。そのため、彼が何をすべきかを決定している間、アプリにはそれらを読み込むのに十分な時間が必要です。

次のスクリーンショットは、私が何を意味するかを示しています。

ここに画像の説明を入力 お問い合わせタブのみ

なぜこれが起こるのですか？私のコードが必要な場合は、ここにあります (重要な部分のみ! ;))

HTML:

    <!-- Home jQueryMobile page -->
    <div data-role="page" id="homePage" data-dom-cache="true">

        <!-- Header -->
        <div data-role="header" id="homePageHeader" data-position="fixed">
            <h1>Frankie App</h1>
        </div>

        <!-- android style navbar. If the device is not an android, it
         will not be shown -->
        <div data-role="navbar" id="androidNavBar" hidden>
            <ul>
                <li><a href="#" onclick="showTab(contactsTab)">Contatti</a></li>
                <li><a href="#" onclick="showTab(calendarTab)">Calendario</a></li>
                <li><a href="#" onclick="showTab(docsTab)">Documenti</a></li>
            </ul>
        </div>

        <!-- Page content: it contains 4 tabs. The home + the 3 tabs reachable by the navbar-->
        <div data-role="content">
            <div id="homeLogger" hidden>Logger</div> <!-- I use this div as a console to debug -->
            <div id="tabs">
                <div id="homeTab">
                    <p align="center">
                    <img src="http://leaderchat.files.wordpress.com/2011/10/bigstock_cartoon_frankenstein_moster_as_151295541.jpg" height="280"/>
                    </p>
                </div>
                <div id="contactsTab">
                    <h1>Contacts</h1>
                    <ul id="contactList" data-role="listview" data-autodividers="true" data-inset="true">
                    </ul>

                </div>
                <div id="calendarTab" hidden>
                    <h1> Calendar </h1>
                </div>
                <div id="docsTab" hidden>
                    <h1> Documents </h1>
                </div>
            </div>
        </div>


        <!-- Footer -->
        <div data-role="footer" id="homePageFooter" data-position="fixed">
            <!-- iOS style navbar. If the device is not an iPhone, it
             will not be shown -->
            <div data-role="navbar" id="iOSNavBar" hidden>
                <ul>
                    <li><a href="#" onclick="showTab(contactsTab)">Contatti</a></li>
                    <li><a href="#" onclick="showTab(calendarTab)">Calendario</a></li>
                    <li><a href="#" onclick="showTab(docsTab)">Documenti</a></li>
                </ul>
            </div>
        </div>
    </div>

JS:

$('#homePage')
   .bind('pageinit',
      function(){
        //Comment the next line to remove the logger from the home page
        $("#homeLogger").show();

        $("#homeLogger").text("jQuery Initialized");

        //Registering to PhoneGap/Cordova lifecycle events
        $(document).bind('deviceready', initialize)

      });

// ============ //
// Initializers //
// ============ //
function initialize()
{
     $("#homeLogger").text("device ready");
     initNavBar();
     initContacts();
}

function initNavBar()
{
//Retrieve the device platform using PhoneGap
platform = window.device.platform;
$("#homeLogger").text("detected platform: "+platform);
var navbar = null;
if(platform && platform == Constants.ANDROID){
    navbar = $("#androidNavBar");
    $("#homeLogger").text("show Android navBar");
} else {
    //If the platform is not an android, I keep the bottom
    //navbar because I prefer its look
    navbar = $("#iOSNavBar");
    $("#homeLogger").text("show iOS navBar");
}

    if(navbar) //safety check to avoid null reference.
        navbar.show(); //jQuery show() method
}

function initContacts(){
    $("#homeLogger").text("loading contacts...");


    var contManager = new ContactManager();
    contManager.getAllContacts(["id", "name"],
                           function(retrievedContacts){


                                for(var i=0; i<retrievedContacts.length; i++){
                                    var toAppend = "<li><a href='#'>"+retrievedContacts[i].name.formatted+"</a></li>";
                                    $("#contactList").append(toAppend);
                                    $("#homeLogger").text("element appended "+i);
                                }
                                $("#homeLogger").text("element "+$("#contactListview"));
                                $("#contactList").listview('refresh');
                                $("#homeLogger").text("list refreshed");
                                                                  },
                        function(error){
                                $("#homeLogger").text("error: "+error);
                        });
}

// ========== //
// Navigation //
// ========== //
function showTab(tab)
{
    $("#homeLogger").text("Selected Tab: "+tab);
    $("#tabs").find("div").hide();
    $("#"+tab.id).show();
}

ご助力ありがとうございます。リク

4

1 に答える 1

0

コンテンツを動的に追加した後、コンテンツ ページを再作成しようとしましたか?

$('[data-role="content"]').trigger('create');

この b4 を ListView を更新する必要があると思います (ただし、for ループが終了した後)。

于 2013-09-28T15:16:28.340 に答える