在JQueryMobile 1.0中动态加载LI's

Question

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

我遇到了动态内容的问题。基于ajax搜索，我使用列表项填充无序列表。上一页下面的​​代码刷新列表，以便所有的造型正确显示：

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

然而，随着1.0这似乎不再工作。 列表出现，但样式完全错误，所有元素上的数据主题都被忽略。 有没有人遇到类似的问题与更新和遇到的解决方案。

Answer 1

Updating lists
If you add items to a listview, you'll need to call the refresh() method on it to update the styles and create any nested lists that are added. For example:

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

Note that the refresh() method only affects new nodes appended to a list. This is done for performance reasons. Any list items already enhanced will be ignored by the refresh process. This means that if you change the contents or attributes on an already enhanced list item, these won't be reflected. If you want a list item to be updated, replace it with fresh markup before calling refresh.

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

如果#myContent是可以做到这一点列表视图：

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

如果#myContent是页面，您可以做这样的事情：

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

Create vs. refresh: An important distinction
Note that there is an important difference between the create event and refresh method that some widgets have. The create event is suited for enhancing raw markup that contains one or more widgets. The refresh method should be used on existing (already enhanced) widgets that have been manipulated programmatically and need the UI be updated to match.

For example, if you had a page where you dynamically appended a new unordered list with data-role=listview attribute after page creation, triggering create on a parent element of that list would transform it into a listview styled widget. If more list items were then programmatically added, calling the listview’s refresh method would update just those new list items to the enhanced state and leave the existing list items untouched.

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

只是一个供参考您可以链接这些事件看起来像$('#myContent').find('ul').listview().listview('refresh');

Answer 4

它通过CAND被achived。

$('#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/

在第一个例子中，我使用的列表视图（“刷新”）;方法和第二个示例中我使用 $（document）.page（“destroy”）。页（）;