1

この質問は、スタック オーバーフローで何度も尋ねられており、すべての質問からすべての解決策を試しました。それらのリストは次のとおりです。

1：

var list = '';
for....
   list += 'html...';
$('#mylist').append(list);
$('#mylist').listview('refresh'); // appending all at once with var

二：

for....
   $('#mylist').append('html...');
$('#mylist').listview('refresh'); // refresh once after appends

三：

for....
   $('#mylist').append('html...');
$('#mylist').listview().listview('refresh'); // to init listview

四：

for....
   $('#mylist').append('html...').listview('refresh'); // refresh after each append - BAD

私が試したバリエーションは他にもあります。.listview('refresh') なし - スタイルは追加時に削除されます。更新呼び出しを使用すると機能しますが、次のような javascript エラーが発生します。

`キャッチされていないエラー: 初期化の前にリストビューでメソッドを呼び出すことはできません。メソッド 'refresh' を呼び出そうとしました

使え.listview().listview('refresh')ません。

参照: https://stackoverflow.com/a/11943886/488407

PS: 最新バージョンの jQuery モバイル (v1.3.1) を使用しているため、このソリューションは以前のバージョンでも機能した可能性があります。パネルを使用しているため、最新バージョンを使用する必要があります。

4

2 に答える 2

1

アプローチ 2 (最新)

を使用したいと確信している場合は、 を使用して完了したかどうかを解決してから、 を適用するlistview("refresh")ことをお勧めします。このような ：promise()appendrefresh

var li = ""; //append to a string
for (var i = 0; i < accounts.length; i++) {
    li += '<li data-oid="' + accounts[i]._oid + '"><a><h2>' + accounts[i].nickname + ' - ' + accounts[i].bankname + '</h2><p>Balance: ' + accounts[i].acccy + " " + accounts[i].acbal + '</p></a></li>';
}

//check if append is done by chaining promise() and done() 
$('#accountlist').append(li).promise().done(function () {
    $(this).listview("refresh"); // refresh here
});

デモはこちら: http://jsfiddle.net/hungerpain/u9TcE/4/

詳細はこちら：Promise Docs

アプローチ1

refreshlistviewする必要はありません。listview要素は、それらがどのように見えるようにするために多くのcss操作を必要としません. そのため、それらはオンザフライでスタイル設定されます (つまり、set to を使用してをappending する場合) 。ここでこの配列を見てください:liuldata-rolelistview

var songs = [
             "Sweet Child 'O Mine", 
             "Summer of '69", 
             "Smoke in the Water", 
             "Enter Sandman", 
             "I thought I've seen everything"
            ];

HTML は次のとおりです。

 <ul data-role="listview" id="songlist" data-theme="c" data-divider-theme="a" data-inset="true">
     <li data-role="list-divider" role="heading">Song List</li>
 </ul>

これを注入する方法は次のとおりです。

    $.each(songs, function (i, song) {
       $("<li/>", {
            "data-icon": "star",
            "class": "vote",
            "html": '<a href="#" id="song' + i + '">' + song + '</a>',
            "id": i
       }).appendTo("#songlist");
    });

それはそれです。この作業を行うために、これ以上何もする必要はありません。次に最も重要なことは配置です。

ここに画像の説明を入力

スクリプトを body に配置すれば完了です。これが機能する理由は、追加が で同期的であるため<body>です。したがって、これを使用すると、要素がすでに DOM にロードされており、jQM が自動的に更新する準備ができていることを確認できます。

ここにデモがあります

jsFiddle のオプション - jsFiddle docsから

onLoad : onLoad ウィンドウ イベントで実行されるようにコードをラップし、<head>セクションに配置します。

onDomReady : onDomReady ウィンドウ イベントで実行されるようにコードをラップし、<head>セクションに配置します。

no wrap - in<head> : JavaScript コードをラップせず、<head>セクションに配置します

no wrap - in<body> : JavaScript コードをラップせず、<body>セクションに配置します

ソリューションを機能させるには<script>、これを書いたタグ/これjsを入力したファイルの参照をコピーして、 の最後の要素として貼り付けます<body>。

于 2013-06-16T06:52:43.670 に答える
-1

試す$("#your_list").trigger("refresh");

for(...)
   $('#mylist').append('html...');

// call tirgger refresh after your append.
$("#your_list").trigger("refresh");
于 2013-06-16T06:25:21.630 に答える