JQuery Mobile动态列表视图在更新后丢失样式(数据插入)

Question

我正在创建一个移动应用程序(Phonegap/Cordova 1.5.0,JQM 1.1.0)并在iOS 5.1上进行测试.我有一个用户"拥有"或想要拥有的项目列表.在整个应用程序中,用户可以通过添加和删除项目来编辑其列表.每当添加或删除项目时,列表都会更新,并且显示正常,所有JQuery CSS都保持不变,除了角落不再舍入(我在想因为数据插入设置为"false").

这是我的list-headers的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'"之外,还有另一种方法可以/应该实现转角舍入吗？

以下是我尝试过的事情:

• 在列表视图和页面上使用.trigger("create")
• 每次使用$("#page-ID")添加带有显式样式的listview.append(...)
• 我在StackOverflow上读了另一篇帖子,说你在创建一个项目时创建了一些内部元素(这个帖子与动态按钮的大小不一致),并且你有一些类(比如.ui-btn)可以访问(当我从节点中删除孩子时可能会失去样式？),但我无法在这个方向上取得任何进展.

在此先感谢您的帮助!

Answer 1

尝试在更新 HTML 后调用 listview(refresh) 。