javascript - JQuery Mobile 动态 ListView 在更新后丢失样式(数据插入)

Question

我正在创建一个移动应用程序(Phonegap/Cordova 1.5.0，JQM 1.1.0)并在 iOS 5.1 上进行测试。我有一个用户“拥有”或想要拥有的项目列表。在整个应用程序中，用户可以通过添加和删除项目来编辑他们的列表。每当添加或删除项目时，列表都会更新，并且显示正常，所有 JQuery CSS 都完好无损除了 Angular 不再是圆的(我在想因为数据插入被设置为“假”)。

这是我的列表标题 html:

<div data-role="page" id="profile">
        <div data-role="header" data-position="fixed">
            <...>
        </div><!-- /header -->
        <div data-role="content" data-theme="a">
            <...>

            <ul id="user-wants-list" data-role="listview" data-inset="true" data-theme="d" data-dividertheme="d" >
            </ul> <!--/Wants list-->
            </br>

            <ul id="user-haves-list" data-role="listview" data-inset="true" data-theme="d" data-dividertheme="d" >
            </ul>  <!--/Has list-->
            </br></br>
        </div> <!--/content-->
</div> <!--/Profile-->

这是我删除旧列表并动态添加新列表的 Javascript(参数“haves”是一个对象数组):

function displayHaves(haves){

var parent = document.getElementById('user-haves-list');
removeChildrenFromNode(parent);
parent.setAttribute('data-inset','true');
$(parent).listview("refresh");

var listdiv = document.createElement('li');
listdiv.setAttribute('id','user-haves-list-divider');
listdiv.setAttribute('data-role','list-divider');
listdiv.innerHTML = "I Have (" + haves.length + ")";
parent.appendChild(listdiv);

//create dynamic list
for(i=0;i<haves.length;i++){
    var sellListing = haves[i].listing;
    var userInfo = haves[i].user;
    var itemData = haves[i].item;

    //create each list item
    var listItem = document.createElement('li');
    listItem.setAttribute('id','user-haves-list-item-'+i);
    parent.appendChild(listItem);
    var link = document.createElement('a');
    link.setAttribute('id','user-haves-link-' + i);
    new FastButton(link, function(listing) {
                   return function() { displaySellListingPage(listing); }
                   }(sellListing));
    listItem.appendChild(link);

    var link = document.getElementById('user-haves-link-' + i);
    var pic = document.createElement('img');
    pic.setAttribute('src',itemData.pictureURL);
    pic.setAttribute('width','80px');
    pic.setAttribute('height','100px');
    pic.setAttribute('style','padding-left: 10px');
    link.appendChild(pic);
    var list = document.getElementById('user-haves-list');
    $(list).listview("refresh");
}

我的函数 removeChildrenFromNode(parent) 如下:

function removeChildrenFromNode(node){
    while (node.hasChildNodes()){
         node.removeChild(node.firstChild);
    }
}

所以我的问题是，为什么 listview 会丢失 data-inset 属性？

或者，同样有效:除了“data-inset='true'”之外，还有其他方法可以/应该实现圆 Angular 吗？

以下是我尝试过的:

• 在 ListView 和页面上使用 .trigger("create")
• 每次使用 $("#page-ID").append(...) 添加具有显式样式的 ListView
• 我在 StackOverflow 上阅读了另一篇文章，其中说 JQM 在您创建项目时会创建一些内部元素(这篇文章与动态按钮大小不正确有关)，并且有一些类(例如 .ui-btn )，你可以访问(当我从节点中删除子节点时，它可能会丢失样式？)，但我无法在那个方向取得任何进展。

在此先感谢您的帮助!

Answer 1

我找到了问题的答案，但还没有找到解决方案。

$(list).listview('refresh') 在某些元素被放到页面上之前就被调用了，所以它实际上是什么都没有被调用(或者另一种思考方式关于它的是每个被附加的列表项都发生在 刷新调用之后，因此它会覆盖一些视觉样式。

我知道问题与 javascript 中的异步加载有关。本质上，.listview('refresh) 在较早的代码之前执行，后者创建元素但执行时间更长。我理解设计背后的原因，但在这种情况下有什么办法可以解决这个问题吗？

我在想一些我可以设置的条件，比如:

var doneLoading = false;
//Then when finished set doneLoading to 'true'
if(doneLoading) $(list).listview('refresh');

但如果首先调用刷新，我认为 doneLoading 只会评估为 false，然后在列表实际完成加载后不会执行。

有没有我可以使用的任何类型的 onComplete 回调，或者有什么方法可以让它同步发生？