jQuery móvel dinamicamente injetando páginas
Estou usando o jQuery mobile e atualmente construo um menu na hora usando o código abaixo. Agora preciso criar páginas reais para itens de menu como meu próximo passo. Eu tenho visto o jQuery Mobile eGeração Dinâmica de Páginas e acho que isso é algo que eu 'poderia' usar para conseguir isso. Eu li os documentos da Geração de Página Dinâmica e não entendo como eu poderia ajustar isso no meu código atual ou mesmo se é certo para o que eu preciso alcançar.
Eu posso ver abaixo que eu tenho o ID e nome da página etc quando eu construo minha saída de menu para a home page, alguém poderia me mostrar um exemplo de como agora eu construo dinamicamente as páginas html necessárias usando jquery para esses itens de menu? Obrigado.
$.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
});
Itens de menu de marcação atuais criados dentro da 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>
Então agora para cada item eu preciso gerar a marcação para cada item usando jquery.
ATUALIZAÇÃO: assim, com base na sugestão, tentei algo assim, mas não funciona.
$.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"]);
});