5

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

这是我的列表标题的 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);
    }
}

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

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

以下是我尝试过的事情：

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

在此先感谢您的帮助！

4

2 回答 2

2

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

$(list).listview('refresh')在某些元素被放到页面上之前就被调用了，所以它基本上没有被调用（或者另一种思考方式是，每个被附加的列表项都发生在刷新调用之后，所以它覆盖了一些视觉风格）。

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

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

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

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

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

于 2012-08-13T23:55:15.987 回答
1

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

于 2012-08-03T17:42:40.493 回答