jquery - Listview 看起来很奇怪 - jQuery

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>

这是我<li>在列表视图中添加新的代码

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

有谁能够帮我？谢谢！

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设置为的动态创建的 s 的标记listview。

promise

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

done

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

附加功能

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

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

Answer 2

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

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