jquery mobileで既存のリストに新しいオブジェクトを追加するときに綺麗に表示する方法

昨日、#pogoplug accessを実装するときに、一回のファイルリスト取得リクエストで取得出来なかった分を、矢印キーではなく、リストのcontinue…ボタンで再度リクエストして既存のリストに追加するようなUIに変更しようとしました。
しかしながら、jquery mobileは表示をする際に、かなりDOM操作をして最初のDOMのカタチを維持していませんので、

    //失敗例(かなり単純化して書いてあります。)
    var 既存のリスト = $("#既存のリストのID");

    新しくできたliオブジェクト.appendTo(既存のリスト);

    既存のリスト.listview();

とやると、たしかに新しく追加した要素は綺麗に表示されるのですが、既に存在していたliオブジェクトの表示がおかしくなってしまう事が分かりました。

そこで一旦諦めようかと思ったのですが、ちょっと考えて下の方法で試したらうまく行くことが分かりました。
説明すると、

新しくulオブジェクトを作って、
そちらに一旦新しいliオブジェクトを追加し、
新しいulオブジェクトをlistview()で表示用に変換した後、
liオブジェクトを既存のulオブジェクトに追加する。

という手順になります。

    //成功例(かなり単純化して書いてあります。)
    //新しいリストをつくって
    var 新しいリスト = $('<ul />');

    //新しいliオブジェクトを追加して
    新しいliオブジェクト.appendTo(新しいリスト);
    //listviewで表示用に変換して
    新しいリスト.listview();

    //既存のリストに追加する
    新しいリスト.find('li').appendTo($("#既存のリストのID")); 

これで、既存のオブジェクトも新しいオブジェクトも綺麗に表示されるようになりました。

Share