Question

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

如果有人提供一些有用的例子，那将会很棒。

谢谢..

Answer 1

为了使数据以增强的jQuery移动格式呈现，您需要

以列表格式将数据添加到DOM，并使用data-role="listview"属性
```
<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

Answer 2

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

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

然后，通过获取的服务数据填写listview：

$.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

Answer 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>

这是我的代码。

如何在listview上填充动态内容？

3 个答案: