Question

我正在创建一个移动应用程序（Phonegap / Cordova 1.5.0，JQM 1.1.0）并在iOS 5.1上进行测试。我有一个用户＆＃34;拥有的项目列表＆＃34;或者想要拥有。在整个应用程序中，用户可以通过添加和删除项目来编辑其列表。每当添加或删除项目时，列表都会更新，并且显示正常，所有JQuery CSS完整除之外的角落不再是四舍五入的（I＆＃39;我在想，因为数据插入设置为＆＃34; false＆＃34;）。

这是我的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我删除旧列表并动态添加新列表（参数＆＃39; haves＆＃39;是一个对象数组）：

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属性？

或者，同样有效：除了＆＃34; data-inset =＆＃39; true＆＃39;＆＃34;？

之外，还有另一种方法可以/应该实现转角舍入

以下是我尝试过的事情：

在列表视图和页面上使用.trigger（＆＃34;创建＆＃34;）
每次使用$（＆＃34;＃page-ID＆＃34;）添加带有显式样式的列表视图。附加（...）
我在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回调，还是一种同步发生的方法？

Answer 2

更新HTML后尝试调用listview（刷新）。

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

2 个答案: