jquery mobile动态注入页面答案

【问题标题】：jquery mobile Dynamically Injecting Pagesjquery mobile动态注入页面
【发布时间】：2013-03-31 14:26:36
【问题描述】：

我正在使用 jQuery mobile，目前正在使用下面的代码动态构建一个菜单。我现在需要为菜单项创建实际页面作为下一步。我一直在研究 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
         });

在导航列表中创建的当前标记菜单项：

<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"]);


 });

【问题讨论】：

创建一个页面并移动到它？您可以在页面内创建页面。您创建的按钮应该会生成一个页面并移至该页面。
嗨@Omar 不，目前所有代码似乎都在按照我的意愿在主页上创建菜单项。但我现在需要每个项目的实际页面。所以即...它为每个开始创建整个事物...
etc
页面IDid='+v["id"]+'

标签： jquery jquery-mobile

【解决方案1】：

这是一种动态创建新页面的简单方法。

Working example

// Prepare your page structure
var newPage = $("<div data-role='page' id='page'><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 into pageContainer
newPage.appendTo($.mobile.pageContainer);

// Move to this page by ID '#page'
$.mobile.changePage('#page');

【讨论】：

所以我可以在我的循环 $.each(siteData["pages"], function(i,v) { etc 中这样做吗？
@MarkO 是的，您可以，但删除我答案中的最后一部分。您的下一个问题是，谁在动态生成的页面之间导航；）我会举个例子。

【解决方案2】：

如果您想用新内容重新创建页面，则会出现兑现问题。所以你必须这样做......

var $i = 0;
$('#test').on('click', function () {
	$i++;
  alert("I="+$i);
    // Prepare your page structure
    var newPage = $("<div data-role='page' id='page'><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 = " + $i + "</div></div>");

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

    // Move to this page by ID '#page'
    $.mobile.changePage('#page');
});

$(document).on('pagehide', '#page', function(){
    $(this).remove();
});

&lt;a data-role=button id=test&gt;test&lt;/a&gt;

【讨论】：