0

在阅读并尝试了许多回答之后，我在这里的第一个问题......我应该承认我对这一切都很陌生。

我有一个以 JSON 格式存储的长列表。它的长度超过 500 项。我希望data-role="listview"在<ul>.

第一个呈现整个列表，但未能对其进行样式设置：

<div id="ListDiv"></div>
<script>
    $.getJSON('BookList.json', function(data) {
        var output="<ul>";
        for (var i in data.BookList) {
            output+="<li>" + data.BookList[i].UniqueIndex + ": " + data.BookList[i].Title + " | " + data.BookList[i].published +"</li>";
        };
        output+="</ul>";
        document.getElementById("ListDiv").innerHTML=output;
        $("#ListDiv ul").append(' id="List" data-role="listview" ');
        $('#List').listview('refresh');
  });
</script>

第二个仅呈现最后一项但对其进行样式设置：

<div>
<ul id="List" data-role="listview"></ul>
</div>
<script>
    $.getJSON('BookList.json', function(data) {
        var output=""; 
        for (var i in data.BookList) {
        output="<li>" + data.BookList[i].UniqueIndex + ": " + data.BookList[i].Title + " | " + data.BookList[i].published +"</li>";
        };
        document.getElementById("List").innerHTML=output;
       $('#List').listview('refresh');
  });
</script>

我一直试图理解为什么这些脚本的功能不同，以及我必须做些什么才能正确格式化整个列表。我确信我使用 jQuery Mobile 的经验不足是罪魁祸首。

谢谢

4

2 回答 2

1 
$.getJSON('BookList.json', function(data) {
  var output='<ul id="List" data-role="listview">';
    for (var i = 0; i < 5; i++) {
        output+="<li>" + BookList.UniqueIndex + ": " + BookList.Title + " | " + BookList.published +"</li>";
    };
    output+="</ul>";
    $("#ListDiv").append(output);
    $('#List').listview();
});

这段代码应该可以工作。正如我在评论中提到的， data-role 和 id 是属性，因此您需要在其中指定它们或使用 $("#List").attr() 添加它们

此外，当您完全动态地添加列表视图时，您必须在调用任何其他列表视图方法之前调用 .listview() 对其进行初始化。如果您的 listview 已经在 HTML 中声明并且您只是在更新它，那么您只需调用 listview("refresh")。

这是我正在玩的小提琴： JSFiddle Example

快速编辑：如果您只是使用，我认为您的第二个代码部分实际上会起作用

output += "<li>" + data.BookList[i].UniqueIndex + ": " + data.BookList[i].Title + " | " + data.BookList[i].published +"</li>";

而不是 "output=" （以及我们之前谈到的 .listview() 替换）。“+=”确保您将字符串附加到已经存在的字符串的末尾，“=”只是每次将字符串替换为新字符串。

我没有运行这段代码，因为上面的例子是有效的。

此外，Alkis 对我所做的一些更改也有一些很好的解释。所以一定要检查他/她的答案！

于 2013-05-20T18:13:34.110 回答
1

在您的第一个示例中，方法是错误的。我的意思是脚本没有做你想做的事。

这个

document.getElementById("ListDiv").innerHTML=output;
$("#ListDiv ul").append(' id="List" data-role="listview" ');

应该是这样的

$("#ListDiv").append('<ul id="List" data-role="listview"></ul>');

你不需要这个

document.getElementById("ListDiv").innerHTML=output;

而且由于您使用的是jquery，因此等效的是

$("ListDiv").innerHTML=output;

但你不需要这个。

你完整的第一个例子应该是

<div id="ListDiv"></div>
<script>
    $.getJSON('BookList.json', function(data) {
        var output="";
        for (var i in data.BookList) {
            output+="<li>" + data.BookList[i].UniqueIndex + ": " + data.BookList[i].Title + " | " + data.BookList[i].published +"</li>";
        }
        $("#ListDiv").append('<ul id="List" data-role="listview"></ul>');
        $('#List').append(output);
        $('#List').listview();   //<-- here
  });
</script>

更新

我改变了我的代码，因为我忘记了我非常重要的事情。当您的 ul 标签是静态的（html 声明）并且您只需向其中添加元素然后最后您调用$('#List').listview('refresh'); 但是当您动态创建列表时（您使用 javascript 填充 ul 标签）然后您使用$('#List').listview(); 这应该可以工作。

演示

于 2013-05-20T18:13:38.353 回答