Question

我的ListView遇到了一些问题。它没有jQuery提供的漂亮外观，但只是一个简单的列表，我不知道这将如何来。

这是代码（HTML）

<div data-role="page" id="home">
    <div data-role="header">
        <h1>Bestelling</h1>
        <a class="ui-btn-right" href="#toevoegen">+</a>
    </div>

    <div data-role="content">
        <ul data-role="listview" data-inset="true" id="bestellingLijst">
            <!-- Hier komt de bestelling -->
        </ul>
    </div>
</div>

以下是我向listview添加新<li>的代码

$("#bestellingLijst").append("<li>" + naam + ' - ' + prijs + "</li>");

enter image description here

任何人都可以帮助我吗？谢谢！

Answer 1

<强>解决方案

有时，需要使用promise使listview("refresh")等待追加完成，然后调用成功处理程序，该处理程序运行refresh上的listview。

$("#bestellingLijst").append("<li>" + naam + ' - ' + prijs + "</li>").promise().done( function(){
    $(this).listview('refresh');
});

如果您在循环中调用append，最好先将其存储在变量中，然后将其全部附加到#bestellingLijst：

var i = 0;
var li = "";
for(; i< array.length; i++)
{
  //concat to string
  li += "<li>" + naam + ' - ' + prijs + "</li>";
}
$("#bestellingLijst").append(li).promise().done( function(){
      $(this).listview('refresh');
});

演示

http://jsfiddle.net/hungerpain/CdQTW/

有关所用方法的更多信息

<强> listview("refresh")

文档： http://api.jquerymobile.com/listview/#method-refresh
它的作用：刷新动态创建的ul的标记，其中data-role设置为listview。

promise

文档： http://api.jquery.com/promise/
它的作用：确保绑定到集合（排队或非排队）的特定类型的所有操作都已完成。

<强> done

文档： http://api.jquery.com/deferred.done/
它的作用：添加要在解析promise时调用的处理程序。

其他

并且，我希望你在jQM的页面事件方法中调用这个刷新，如果你在页面加载时运行它：

$(document).on("pageinit", "#home", function () {
  //append to ul
  //refresh the listview
});

Answer 2

如果您将项目添加到列表视图，则需要在其上调用refresh（）方法来更新样式并创建添加的任何嵌套列表。

$('#bestellingLijst').listview('refresh');

Listview看起来很奇怪 - jQuery

2 个答案: