选项卡中的 jQuery Mobile 列表视图和渲染问题

Question

我正在PhoneGap + jQuery Mobile 中编写一个非常简单的应用程序。 目的是让您在编写 PhoneGap 应用程序时更有信心。

该应用程序非常简单：它有一个带导航栏的主页。 导航栏包含三个按钮：联系人、日历和文档。

这些按钮管理<div data-role="content"> 元素中的三个选项卡。 我已经隐藏了这三个标签。 当用户点击导航栏时，我可以正确浏览标签。

现在，问题是：我在第一个选项卡中成功加载了联系人，但是当我导航到它时，我只看到分隔线！ 相反，如果我不在家中隐藏联系人选项卡，我可以正确看到联系人。 我想在用户仍在主页时加载所有数据。因此，当他决定要做什么时，应用程序应该有足够的时间来加载它们。

以下截图显示了我的意思：

为什么会发生这种情况？ 如果您需要我的代码，这里是（仅重要部分！;)）

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

非常感谢您的帮助。 里克

Answer 1

您是否尝试在动态添加内容后重新创建内容页面？

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

我猜你应该这样做 b4 刷新你的 ListViews（但在你的 for 循环完成之后）。