从 xml 读取 - 输出有 jQuery Mobile listview答案

【问题标题】：Read from xml - output has jQuery Mobile listview从 xml 读取 - 输出有 jQuery Mobile listview
【发布时间】：2012-01-29 10:15:21
【问题描述】：

我正在尝试从 .xml 文件中读取一些信息并使用 jQuery Mobile 将其显示在列表视图中。我搜索了各种方法，但我无法做到...有人可以帮我吗？

谢谢

<!DOCTYPE html> 
<html> 
<head> 
<title>XXXXXX</title> 
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/jqm-docs.css" />
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>

从标记获取信息的脚本

<script type="text/javascript">



function initialize() {
    jQuery.get("markers.xml", {}, function(data) {
        jQuery(data).find("marker").each(function() {
            var marker = jQuery(this);
            var name = marker.attr("name");
            $("last").append('<li class="arrow">' + name + '</li>');
        });
    });
}



</script>

</head>

HTML 正文.. div=id 是否正确？

<body onLoad="initialize()"> 

<div data-role="page" class="type-home"> 
    <div data-role="header">
        <h1>XXX</h1>
    </div>
    <div data-role="content"> 
        <div class="content-secondary">
        <div id="jqm-homeheader">
            <h1 id="jqm-logo"><img src="images/logo_final.jpg"/></h1>
        </div>
                <ul data-role="listview" data-inset="true" data-theme="c" data-dividertheme="b">
                    <li data-role="list-divider">Menu</li>
                    <li class="arrow"><a href="inserir.html" data-transition="slide">Inserir</a></li>
                    <li class="arrow"><a href="find.html" data-transition="slide">Procurar</a></li>
                    <li class="arrow"><a href="map.html" data-transition="slide">Mapa</a></li>
                    <li class="arrow"><a href="contact_us.html" data-transition="slide">Termos e Condições</a></li>
                    <li class="arrow"><a href="contact_us.html" data-transition="slide">Contact Us</a></li>

                </ul>
        </div>
        <div class="content-primary" id="last">
            <ul data-role="listview">
                <li data-role="list-divider">Ultimos:</li>

            </ul>


        </div>
    </div>
</div>
</body>
</html>

-----------更新------------

XML 代码

<?xml version="1.0" encoding="utf-8"?>

<!--
- Database: 'ond68nda_dataBase'
-->
<database name="ond68nda_dataBase">
    <!-- Table markers -->
    <table name="markers">
        <column name="id">1</column>
        <column name="name">asd</column>
        <column name="address">dasd</column>
        <column name="lat">37.437130</column>
        <column name="lng">-122.117012</column>
        <column name="type">restaurant</column>
    </table>
    <table name="markers">
        <column name="id">2</column>
        <column name="name">asd</column>
        <column name="address">dasd</column>
        <column name="lat">37.437130</column>
        <column name="lng">-122.117012</column>
        <column name="type">restaurant</column>
    </table>
    <table name="markers">
        <column name="id">3</column>
        <column name="name">dasd</column>
        <column name="address">dasdas</column>
        <column name="lat">37.440266</column>
        <column name="lng">-122.137436</column>
        <column name="type">restaurant</column>
    </table>
    <table name="markers">
        <column name="id">4</column>
        <column name="name"></column>
        <column name="address"></column>
        <column name="lat">0.000000</column>
        <column name="lng">0.000000</column>
        <column name="type"></column>
    </table>

【问题讨论】：

您能具体说明您面临的问题吗

标签： jquery xml listview mobile jquery-mobile

【解决方案1】：

您似乎正在尝试附加到 ID 为 last 的元素，为此您可以使用此选择器：$('#last')。

您不想将<li> 元素附加到<div> 元素，因此您的选择器应如下所示：$('#last').children('ul')。

我喜欢通过缓存 HTML 字符串然后一次性追加所有字符串来提高性能，而不是对.append() 函数进行大量调用：

function initialize() {
    jQuery.get("markers.xml", {}, function(data) {
        var output = [];
        jQuery(data).find("marker").each(function() {
            var name = jQuery(this).attr("name");
            output.push('<li class="arrow">' + name + '</li>');
        });
        $('#last').children('ul').append(output.join('')).listview('refresh');
    });
}

在我将新 HTML 附加到 listview 后，请注意 .listview('refresh')，这将刷新小部件，以便正确设置新添加的 <li> 元素的样式。

来源：http://jquerymobile.com/demos/1.0/docs/lists/docs-lists.html（在页面底部）

由于我不知道您的 XML 文档的结构，我无法确定 .each() 循环是否会按照您的意愿工作。

此外，由于 jQuery Mobile 页面可以通过 AJAX 拉入，因此依赖 onload 事件触发并不是一个好主意，而是将初始化绑定到特定页面的 pageinit 事件：

$(document).delegate('.type-home', 'pageinit', function () {
    //run code here
});

来源：http://jquerymobile.com/demos/1.0/docs/api/events.html

更新

function initialize() {
    jQuery.get("markers.xml", {}, function(data) {
        data = $($.parseXML(data));
        var output = [];
        data.find('table[name="markers"]').each(function() {
            var name = jQuery(this).children('[name="name"]').text();
            output.push('<li class="arrow">' + name + '</li>');
        });
        $('#last').children('ul').append(output.join('')).listview('refresh');
    });
}

这是一个演示：http://jsfiddle.net/7ZeEG/

请注意，您还可以将$.get() 调用的dataType 设置为xml，而不是使用：data = $($.parseXML(data));（未经测试）：

function initialize() {
    jQuery.get("markers.xml", {}, function(data) {
        var output = [];
        data.find('table[name="markers"]').each(function() {
            var name = jQuery(this).children('[name="name"]').text();
            output.push('<li class="arrow">' + name + '</li>');
        });
        $('#last').children('ul').append(output.join('')).listview('refresh');
    }, 'xml');//see that I declared a XML dataType right here
}

【讨论】：

您好，首先谢谢您。我了解您所做的更改，并且我知道问题在于我从 xml 读取属性的方式。你能说我没看错吗？
@MárioCarvalho 我以前从未真正使用 jQuery 解析过 XML 文档，但我更新了我发现的答案。首先你需要将你的服务器响应解析为 XML，然后你可以使用.find() 来定位你想要的元素。