jquery - jquery mobile 動的にページを挿入する

Question

私は jQuery モバイルを使用しており、現在、以下のコードを使用してその場でメニューを作成しています。次のステップとして、メニュー項目の実際のページを作成する必要があります。私は jQuery Mobile とDynamic Page Generationを見てきましたが、これはこれを達成するために使用できるものだと思います。動的ページ生成のドキュメントを読みましたが、これを現在のコードにどのように適合させるか、または達成する必要があるものに適しているかどうかさえわかりません。

ホームページのメニュー出力を作成するときに、ID やページ名などを既に持っていることがわかります。これらのメニュー項目に jquery を使用して必要な html ページを動的に作成する方法の例を教えてもらえますか? ありがとうございました。

$.each(siteData["pages"], function(i,v) {
             $.mobile.activePage.find('[data-role=content]').append('' +
                     '<a href='+ v["id"] + ' data-role="button">' + v["name"] + '</a>').trigger('create');

            // NOW I HAVE THE MENU LETS CREATE THE ACTUAL PAGES INSIDE HERE TOO
         });

navlist 内に作成された現在のマークアップ メニュー項目:

<div data-role="page" id="index">
    <div data-theme="a" data-role="header">
    </div>

    <div data-role="content" class="navlist">
    </div>

    <div data-role="footer">
    </div><!-- /footer -->
</div>

そのため、アイテムごとに、jquery を使用して各アイテムのマークアップを生成する必要があります。

更新:提案に基づいて、このようなことを試しましたが、機能しません。

 $.each(siteData["pages"], function(i,v) {
     $.mobile.activePage.find('[data-role=content]').append('' +
             '<a href='+ v["id"] + ' data-role="button">' + v["name"] + '</a>').trigger('create');



     // Prepare your page structure
     var newPage = $("<div data-role='page' id=v[id]><div data-role=header>" +
             "<a data-iconpos='left' data-icon='back' href='#' data-role='button' " +
             "data-rel='back'>Back</a><h1>Dynamic Page</h1></div><div data-role=content>Stuff here</div></div>");

    // Append the new page info pageContainer
                 newPage.appendTo($.mobile.pageContainer);

    // Move to this page by ID '#page'
                 $.mobile.changePage('#'+v["id"]);


 });