Tworzę aplikację mobilną (Phonegap / Cordova 1.5.0, JQM 1.1.0) i testuję na iOS 5.1. Mam listę przedmiotów, które użytkownik „posiada” lub chce posiadać. W całej aplikacji użytkownik może edytować swoją listę, dodając i usuwając elementy. Zawsze, gdy elementy są dodawane lub usuwane, lista aktualizuje się i jest dobrze wyświetlana, z całością nienaruszonego CSS JQueryz wyjątkiem narożniki nie są już zaokrąglone (myślę, ponieważ wstawka danych jest ustawiana na „fałsz”).

Oto mój html dla nagłówków list:

<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-->

Oto JavaScript, w którym usuwam starą listę i dynamicznie dodaję nową (parametr „haves” to tablica obiektów):

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");
}

}

a moja funkcja removeChildrenFromNode (rodzic) jest następująca:

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

Moje pytanie brzmi: dlaczego listview traci atrybut wstawiania danych?

Lub, co równie ważne: czy istnieje inny sposób, w jaki mogę / powinienem osiągać zaokrąglanie narożników poza „data-inset =„ true ”?

Oto rzeczy, które próbowałem:

za pomocą .trigger („create”) zarówno na liście, jak i na stroniedodawanie listview z wyraźnym stylizacją za każdym razem przy użyciu $ ("# page-ID"). append (...)Przeczytałem kolejny post na StackOverflow, który powiedział, że JQM tworzy pewne wewnętrzne elementy podczas tworzenia elementu (ten post miał do czynienia z dynamicznymi przyciskami, które nie są odpowiednim rozmiarem) i że istnieją pewne klasy (np. .Ui-btn), które ty może uzyskać dostęp (może tracić styl, gdy usuwam dzieci z węzła?), ale nie mogłem zrobić żadnego kroku w tym kierunku.

Z góry dziękuję za pomoc!