5

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").

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

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

}

and my function removeChildrenFromNode(parent) is as follows:

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

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

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

Here are things I have tried:

  • using .trigger("create") on both the listview and the page
  • adding the listview with explicit styling each time by using $("#page-ID").append(...)
  • I read another post on StackOverflow that said that JQM creates some inner elements when you create an item (this post had to do with dynamic buttons not being the right size), and that there are some classes (like .ui-btn) that you can access (that may be losing styling when I remove the children from the node?), but I was unable to make any headway in that direction.

Thanks in advance for the help!

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 に答える