JQuery Mobile动态列表视图在更新后失去样式（数据插入） [英] JQuery Mobile dynamic listview loses style (data-inset) after updating

问题描述

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

I am creating a mobile app (Phonegap/Cordova 1.5.0, JQM 1.1.0) and testing on iOS 5.1. I have a list of items that the user "owns" or wants to own. Throughout the app, the user can edit their list by adding and removing items. Whenever items are added or removed, the list updates, and it is displaying fine, with all of the JQuery CSS intact except the corners are no longer rounded (I'm thinking because data-inset is getting set to "false").

这是我的html的list-headers：

Here is my html for the list-headers:

<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'是一个对象数组）：

And here is the Javascript where I remove the old list and dynamically add the new one (the parameter 'haves' is an array of objects):

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）如下：

and my function removeChildrenFromNode(parent) is as follows:

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

所以我的问题是，为什么listview会失去数据插入属性？

So my question is, why does the listview lose the data-inset attribute?

或者，同样有效的：除了data-inset ='true'之外，还有另一种方法可以/应该实现圆角？

Or, equally valid: is there another way I could/should be achieving corner rounding besides "data-inset='true'"?

这里有我试过的事情：

• 在列表视图和列表视图上使用.trigger


• 每次使用$（＃page-ID）添加带有显式样式的listview append（...）


• 我阅读了另一篇关于StackOverflow的文章说，JQM创建一些内部元素，当你创建一个项目（这篇文章要做的动态按钮不是正确的大小），并有一些类（如.ui-btn），你可以访问（当我从节点中删除子节点时可能会丢失样式），但我无法在这个方向上取得任何进展。

先感谢您的帮助！

推荐答案

我想出了我的问题的答案，

I figured out the answer to my question, but not a solution (yet).

$（list）.listview（'refresh'）已经被放在页面上，所以它基本上没有被调用（或者另一种方式来考虑是每个列表项被附加在之后在刷新调用之后发生，因此它覆盖了一些视觉样式）。

$(list).listview('refresh') was getting called on some elements before they had been put on the page, so it was essentially being called on nothing (or another way to think about it is that each list item being appended happens after the refresh call, so it overrides some of the visual styling).

我知道问题与在javascript中的异步加载有关。基本上， .listview（'refresh）在较早的代码之前执行，它创建元素，但执行时间较长。我理解设计背后的理由，但是在这种情况下有一些方法来解决这个问题吗？

I know the problem has to do with asynchronous loading in javascript. Essentially, the .listview('refresh) executes before the earlier code, which creates the elements but takes longer to execute. I understand the reasoning behind the design, but is there some way to get around this in this case?

我认为我可以设置一些条件，例如：

I am thinking some conditional that I could set, like:

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

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

but if the refresh gets called first, I figure that doneLoading will just evaluate to false and then not execute once the list is actually done loading.

有什么类型的onComplete回调可以使用，或者一种方法使它同步发生？

Is there any kind of onComplete callback I can use, or a way to make it happen synchronously?

这篇关于JQuery Mobile动态列表视图在更新后失去样式（数据插入）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！