Question

我正在尝试使用jQuery Mobile应用程序，该应用程序最终会成为移动设备上的非Web应用程序，因此所有内容都必须是本地的。出于这个原因（我认为）我需要在data-role="page"标签描述的单个页面中构建应用程序，否则jQuery Mobile中的ajax加载机制似乎不起作用。

该应用程序将从本地存储数据库中读取数据，并将其显示在页面上的无序列表中，使用jQuery Mobile进行样式设置，看起来像本机应用程序。

在我的$(document).ready()函数中，我执行数据库查找，对于每个结果，我在数据库结果周围创建了一个<li>标记，然后调用$(".list").append(li_str);，其中.list是我的<ul>标记的类。

页面呈现就像jQuery Mobile不存在一样 - 我在每个<li>中看到了正确的数据但看起来不正确。

将此结果与我在页面HTML中对<li>标签进行硬编码的版本进行比较 - 看起来jQuery Mobile会修改标签并插入大量新类等。

也许我需要在页面加载周期的早期从DB构建页面？有什么建议吗？

Answer 1

调用$("changed-parent-element").listview()和$("changed-parent-element").trigger("create")都不适合我。为了多次更改DOM内容并重做jQuery移动样式，我需要这个：

$("changed-parent-element").listview("refresh");

版本：jQuery mobile 1.0 RC2

Answer 2

问题是this issue。所以，改变你的代码：

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a2/jquery.mobile-1.0a2.min.css" />
    <script src="http://code.jquery.com/jquery-1.4.4.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.0a2/jquery.mobile-1.0a2.min.js"></script>
    <script>
    function build_dynamic_content()
    {
        var num_entries = 5;

        for (var i = 0; i < num_entries; ++i)
        {
            var li_str = "<li id=\"" + i + "\"><a href=\"#\">" + "Entry number " + ( i + 1 ) + "</a>";
            li_str += "<img src=\"" + "icon.png" + "\" />";
            li_str += "</li>";

            $(".mainlist").append(li_str);
        }
    }
    </script>
</head>

<body>
    <div data-role="page" id="list" data-fullscreen="false">
        <div data-role="content">
            <ul class="mainlist" data-role="listview">
                <li id="0"><a href="#">Test entry</a><img src="icon.png"/></li>
            </ul>
        </div>
    </div>
<script>build_dynamic_content();</script>
</body>
</html>

或者，您可以延迟创建列表视图，直到创建了所有元素（如链接线程中所述）：

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a2/jquery.mobile-1.0a2.min.css" />
    <script src="http://code.jquery.com/jquery-1.4.4.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.0a2/jquery.mobile-1.0a2.min.js"></script>
    <script>
    function build_dynamic_content()
    {
        var num_entries = 5;

        for (var i = 0; i < num_entries; ++i)
        {
            var li_str = "<li id=\"" + i + "\"><a href=\"#\">" + "Entry number " + ( i + 1 ) + "</a>";
            li_str += "<img src=\"" + "icon.png" + "\" />";
            li_str += "</li>";

            $(".mainlist").append(li_str);
        }
    }

    $(function ()
    {
        build_dynamic_content();
        $('ul.mainlist').listview();
    });
    </script>
</head>

<body>
    <div data-role="page" id="list" data-fullscreen="false">
        <div data-role="content">
            <ul class="mainlist">
                <li id="0"><a href="#">Test entry</a><img src="icon.png"/></li>
            </ul>
        </div>
    </div>
</body>
</html>

抱歉代码转储;我无法在jsfiddle中使用它。

Answer 3

马特的答案不是这个问题的一般答案。在其他问题中，我已经多次介绍过这个问题。

上述内容适用于列表视图，但不适用于任何内容。

要在jQuery Mobile中向DOM添加元素，您需要知道.page（）函数。

我做了一个教程 http://jquerymobiledictionary.pl/faq.html

在基于jQuery Mobile的页面中将元素插入DOM

3 个答案: