6

動的に作成しているリストがあります。コンテンツは良さそうに見えますが、各リンクは同じページ リンクを指しています。

私は空のリストから始めます:

<div data-role="content" class="ui-content" role="main">
    <ul data-role="listview" data-theme="b" data-inset="true" id="profile2" class="ui-listview ui-listview-inset ui-corner-all ui-shadow">
    </ul>        
</div>

私$('#profile2').appendはリストを作成するために使用し$('#profile2').listview("refresh");、新しいリンクが挿入されるたびにリストを更新するために使用します。

リストが生成された後のコードのサンプルを次に示します。

<div data-role="content" class="ui-content" role="main">
    <ul data-role="listview" data-theme="b" data-inset="true" id="profile2" class="ui-listview ui-listview-inset ui-corner-all ui-shadow">
        <li><div class="ui-btn-inner ui-li">
            <div class="ui-btn-text"><a href="#/demo?a=53&amp;b=-7&amp;ui-page=profile2-0" class="ui-link-inherit">
                <h3 class="ui-li-heading">Headin1</h3>
                <p class="ui-li-desc">Content 1</p></a><
            </div>
            <span class="ui-icon ui-icon-arrow-r ui-icon-shadow">&nbsp;</span></div>
        </li>
        <li><div class="ui-btn-inner ui-li">
            <div class="ui-btn-text"><a href="#/demo?a=53&amp;b=-7&amp;ui-page=profile2-0" class="ui-link-inherit">
                <h3 class="ui-li-heading">Headin2</h3>
                <p class="ui-li-desc">Content 2</p></a><
            </div>
            <span class="ui-icon ui-icon-arrow-r ui-icon-shadow">&nbsp;</span></div>
        </li>
    </ul>        
</div>

両方のリンクの href が profile2-0 を参照していることに注意してください

興味深いことに、子リンク用に生成されたページには、同じタブインデックス (0) と同じデータ URL があります。これは両方のページのコードです:

<div data-role="page" data-url="/demo?a=53&amp;b=-7&amp;ui-page=profile2-0" tabindex="0" class="ui-page ui-body-a">
   CONTENT.....
</div>

スタイルを更新するために使用listview("refresh")しますが、ページ アイテムが一意にラベル付けされるようにする必要がありますか?

もちろん、これは JQM で処理する必要がありますが、リンクが一意であることを確認するために、リスト アイテムを作成するときにサブ ページ リンクをプログラムで設定する方法がわかりません。

4

1 に答える 1

1

Taifun によって既に指摘されているように、リスト アイテムを生成するコードに問題がある可能性があります (提供していない)。

このコードを試してみましたが、問題はありませんでした:

<script>
        $(document).on("pageshow", function(){
            for(i=0; i<10; i++) {
                $("#profile2").append('<li><a href="/test/' + i + '">test ' + i + '</a></li>');
            }
            $("#profile2").listview('refresh');
        });
    </script>

それが役立つことを願っています。

于 2013-02-07T13:58:10.480 に答える