Question

我刚刚将我的项目从jquerymobile 1.0a1更新为1.0版。

我遇到动态内容问题。基于ajax搜索，我使用列表项填充无序列表。之前，以下代码刷新了列表，以便正确显示所有样式：

$('#myContent').find("ul").listview();
$('#myContent').find("ul").listview('refresh');

然而，从1.0开始，这似乎不再起作用。列表出现但样式完全错误，所有元素的数据主题都被忽略。有没有人遇到类似的更新问题并遇到解决方案。

Answer 1

更新列表
如果您将项目添加到列表视图，则需要在其上调用refresh()方法来更新样式并创建添加的任何嵌套列表。例如：
$('#mylist').listview('refresh');
请注意，refresh()方法仅影响附加到a的新节点名单。这是出于性能原因而完成的。已经有任何列表项刷新过程将忽略增强功能。这意味着如果您更改已增强列表中的内容或属性项目，这些将不会反映出来。如果要更新列表项，在调用refresh之前用新标记替换它。

http://jquerymobile.com/demos/1.0/docs/lists/docs-lists.html

如果#myContent是listview，你可以这样做：

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

如果#myContent是页面，你可以这样做：

$('#myContent').trigger('create');

创建与刷新：重要区别
请注意，create事件和刷新方法之间存在重要差异   一些小部件有。 create事件适合增强原始   包含一个或多个小部件的标记。刷新方法应该是   用于已经被操纵的现有（已经增强的）小部件   以编程方式，需要更新UI以匹配。

例如，如果您有一个动态添加新页面的页面   页面创建后带有data-role = listview属性的无序列表，   在该列表的父元素上触发create会对其进行转换   进入listview风格的小部件。如果有更多的列表项   以编程方式添加，调用listview的refresh方法   将这些新列表项更新为增强状态并离开   现有的清单项目未受影响。

http://jquerymobile.com/demos/1.0/docs/pages/page-scripting.html

Answer 2

您可以通过以下代码替换2行代码来实现您的目标：

 $('#myContent ul').listview('create');

希望这会有所帮助......

Answer 3

我遇到过这个问题。你让事情搞得一团糟的原因是你正在多次初始化和刷新元素。我注意到我运行了两个不同的函数，它们会在同一个元素上调用.listview（'refresh'）。在我拿出一个主题后，数据恢复正常。你也得到任何JS错误吗？

编辑：更具体地说，你在代码中的某个地方调用.listview() 2次，这是初始化两次。我会在你加载页面之前等待运行刷新，所以你只需要调用一次。

你可以做的另一件事是检查元素是否已经初始化，所以你不要做两次。只需检查元素或在某些情况下检查父级，以查看是否存在类ui-listview。

var element = $('#myContent').find('ul');    

if ($(element).hasClass('ui-listview')) {
  //Element is already initialized
  $(element).listview('refresh');
} else {
  //Element has not been initiliazed
  $(element).listview().listview('refresh');
}

只是一个FYI，您可以将这些事件链接为$('#myContent').find('ul').listview().listview('refresh');

Answer 4

可以通过。

来实现

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

The below snippet shows you to load data from xml and dynamically create a list view.
 function loadData()
 {
    $.ajax({
    url:"BirthdayInvitations.xml",
    dataType: "xml",
    success: function(xml) 
    {
       $(xml).find("event").each(function() 
       {
       $("#mymenu").append('<li><a href='+ "#" + ' id="a" ">' + this.textContent + '  </a> </li>'); 
       });

       $("#mymenu").listview('refresh');
    }
});
}

Answer 5

查看这是否与您的问题http://www.amitpatil.me/demos/jquery-mobile-twitter-app/相关，此问题也与http://www.amitpatil.me/demos/ipad-online-dictionary-app/

在JQueryMobile 1.0中动态加载LI

5 个答案: