jquery - PhoneGapjQueryMobileリストビューがセカンダリページに正しく表示されない

Question

jQueryMobileを使用してPhoneGapアプリを開発しています。私の問題はlistview、アルバムページに正しく表示されていないが、ホームページには表示されていることです。私はdata-theme両方に同じものを使用しています。

質問： 2ページ目のリストビューが正しく表示されないのはなぜですか（背景、フォント、アイコン）？

リサーチ：

アルバムページのコード

    <div data-role="page" id="albums" data-url="albums" data-theme="a">
        <div data-role="header">
            <a href="#home" data-role="button" data-corners="true" data-shadow="true">Back</a>
            <h1>Albums</h1>
            <button id="albums-refresh">Refresh</button>
        </div>
        <div data-role="content">
            <ul id="albums-content" data-role="listview" data-inset="true"></ul>
        </div>
    </div>

動的にデータを入力するjQuery関数listview

Load: function () {
    $("#albums-content").empty();
    $.ajax({type: "GET", url: "https://itunes.apple.com/lookup?id=356541460&entity=album", data: {get_param: "results"}, dataType: "json", success: function (data) {$.each(data, function (index, element) {$.each(this, function (index, element) {if (element.wrapperType === "collection") {$("#albums-content").append("<li><a id='a-" + index + "' href='#album-details'><img src='" + element.artworkUrl100 + "' />" + element.collectionName + "</a>"); $("#a-" + index).bind('click', function (index) {Albums.AlbumID = index; }); }}); }); }});
}

PhoneGapデバッグ：

ここに画像の説明を入力してください

アルバムページ セカンドアルバムの下にドロップシャドウのかすかなヒントが表示されますが、紫色の背景とオレンジ色のテキストは表示されないことに注意してください。listview

ここに画像の説明を入力してください

score 2 · Accepted Answer

確認する必要があることの1つ：リストビューにすべてのコンテンツを追加した後、次のコードを追加する必要があります

$("ul#albums-content").listview("refresh");

これは、スタイルを更新し、追加されるネストされたリストを作成するためのものです。

score 2 · Accepted Answer

この問題には簡単な解決策があります（次回はjQMのドキュメントをさらに調べてください）。

オブジェクトがリストビューで動的に作成される場合、jQuery Mobileそのマークアップも次のように拡張する必要があります。

$('#some-listview').listview('refresh');

基本的に、動的コンテンツがjQuery Mobileページに追加されるたびに、手動で拡張する必要があります。このトピックについてもっと知りたい場合は、私のブログARTICLEをご覧ください。または、ここで見つけることができます。

score 2 · Accepted Answer

ajax呼び出しのsuccess関数では、UIを正しく更新およびレンダリングするために、listview要素のrefreshメソッドを呼び出す必要があります。

http://jquerymobile.com/demos/1.2.0/docs/lists/lists-methods.html

jquery - PhoneGapjQueryMobileリストビューがセカンダリページに正しく表示されない

3 に答える 3

Related

Reference