jquery mobile динамически внедряющие страницы
Я использую jQuery mobile и в настоящее время создаю меню на лету, используя код ниже. Теперь мне нужно создать настоящие страницы для пунктов меню в качестве следующего шага. Я смотрю на jQuery Mobile иДинамическая генерация страниц и думаю, что это то, что я мог бы использовать для достижения этой цели. Я прочитал документы по динамической генерации страниц и не понимаю, как я мог бы вписать это в свой текущий код или даже если это подходит для того, что мне нужно достичь.
Как вы можете видеть ниже, у меня уже есть идентификатор, имя страницы и т. Д., Когда я строю вывод своего меню для домашней страницы, может ли кто-нибудь показать мне пример того, как я теперь динамически создаю html-страницы, необходимые с использованием 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');
// 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"]);
});