如何在列表视图上填充动态内容？答案

【问题标题】：How to populate dynamic content on listview?如何在列表视图上填充动态内容？
【发布时间】：2012-12-04 06:30:03
【问题描述】：

我想填充列表视图中的“数据 jsonp”格式的项目列表。我正在使用 jquery mobile 和 phonegap。我已经尝试了所有可能的方法，但数据不是以列表视图的形式出现，而是以简单的格式出现。我正在使用“jquery.mobile-1.0.1.min.css”和“jquery.mobile-1.0.1.min.js”。请帮忙。

如果有人提供一些工作示例，那就太好了。

谢谢..

【问题讨论】：

标签： cordova jquery-mobile ios6

【解决方案1】：

为了以增强的 jQuery 移动格式显示数据，您需要

使用data-role="listview"属性将数据以列表格式添加到DOM
```
<ul id="listContainer" data-role="listview">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
</ul>
```
（您可以让 DOM 中已经存在 </ul>，并在其中添加 JSON 列表中的项目）
使用 jQuery mobile 增强内容，$("#listContainer").listview("refresh");

可以看例子here

【讨论】：

是的，我只是这样定义的。我能够显示数据，但列表视图不会出现。下面我发布了我的代码。见
你打电话了吗 $("#output").listview();添加内容后？
是的。但没有变化。没有列表视图，只有纯格式的数据。
是否有任何 jquery-mobile css 问题。因为我在我的代码中看不到任何错误。
你需要使用 .listview("refresh");我添加了一个指向 jsFiddle 的链接，您的示例正在运行

【解决方案2】：

首先你应该添加一个列表视图：

<ul data-role="listview" id="SomeListView" class="tab">
</ul>

然后，通过获取的服务数据填充列表视图：

$.getJSON(globalServiceUrl + "mobile/services/getSomeData.json", function (json) {
    var html = '';

    $.each(json, function (k, v) {
        var item= json[k];
        html += '<li>'+item.Title+'</li>';
    });

    $("#SomeListView").html(html);
    $("#SomeListView").listview('refresh');
 }); // $.getJSON

【讨论】：

嗨佩曼。 “html+”程序不工作。我无法仅显示来自 json 文件的数据。我已经附上了我的 json 格式，请参阅并根据我的 json 将 item.Title 替换为 item.name。但它不起作用。
([{"id":"1","name":"大本钟","latitude":"51.500600000000","longitude":"-0.124610000000"},{"id" :"4","name":"哈德良长城","latitude":"55.024453000000","longitude":"2.142310000000"},{"id":"2","name":"巨石阵","latitude ":"51.178850000000","经度":"-1.826446000000"},{"id":"3","name":"多佛白崖","纬度":"51.132020000000","经度":"1.334070000000 "}]);

【解决方案3】：

$(document).ready(function(){
$(document).bind('deviceready', function(){
    //Phonegap ready
    onDeviceReady();
});

var output = $('#output');

$.ajax({
    url: 'http://samcroft.co.uk/demos/updated-load-data-into-phonegap/landmarks.php',
    dataType: 'jsonp',
    jsonp: 'jsoncallback',
    timeout: 5000,
    success: function(data, status){
       $.each(data, function(i, item) {
              $('ul').append('<li><h4>' + item.name + '</h4><p>' + item.latitude + '<br>' + item.longitude + '</p></li>');
              });
    },
    error: function(){
       output.text('There was an error loading the data.');
    }
});

});

<body>
    <div>
        <ul data-role="listview" data-filter="false" id="output" >

        </ul>
    </div>
</body>

这是我的代码。

【讨论】：