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") 等到追加完成，然后调用成功处理程序，该处理程序在listview 上运行refresh。

$("#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
• 它的作用：刷新将data-role 设置为listview 的动态创建的uls 的标记。

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');