Question

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

我有一个以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的经验不足是我的责任。

由于

Answer 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方法之前通过调用.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对我所做的一些改变也有一些很好的解释。所以一定要检查他/她的答案！

Answer 2

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

这个

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(); 这应该有用。

A demo

动态样式化JSON列表输入

2 个答案: