使用 jQuery 模板动态创建 jQuery Mobile 页面答案

【问题标题】：Dynamically creating jQuery Mobile pages using jQuery Templates使用 jQuery 模板动态创建 jQuery Mobile 页面
【发布时间】：2011-06-30 05:17:24
【问题描述】：

我正在使用 jquery mobile 为 UI 和 jquery 模板构建一个锻炼目录来处理 html。由于 .page() 函数，我已经能够将 html 附加到已经创建的页面并让 jquery mobile 更改标记。

但是，我希望能够创建新的 jq 移动页面。我可以使用 data-role=page 将代码注入到 div 中，调用 .page() 就可以了。但是在正文中附加一个完整的页面是行不通的。

编辑：这个问题和我的回答是指jquery mobile alpha 3

【问题讨论】：

标签： jquery templates jquery-mobile

【解决方案1】：

好的，我明白了。如果你想向 DOM 添加一个值，你还必须为 data-url 添加一个值。当你创建一个静态 html 页面时，

<div data-role="page" id="home">

jQuery mobile 会自动添加一个与您提供的 id 相同的 data-url。当你自己做的时候，你必须握住它的手，给它传递一个 data-url="home"。

当您生成 html 字符串时，将其附加到 $.mobile.pageContainer 以便 jQuery Mobile 知道在哪里可以找到它（将其附加到正文也可以，但最好不要动摇船）。之后，在 DOM 中调用您的页面上的 .page() ，以便 jQuery mobile 发挥其所有神奇的 <span> 魔法以使其美观。

$('#home').page();

【讨论】：

你能为此创建一个 JSFiddle 吗？我无法重现您的方法。我可以在 dom 中看到，一旦我调用 page()，JQ Mobile 似乎正在用所有适当的属性装饰我的模板，但浏览器窗口中实际上没有出现任何内容。
如果我们能获得更多关于将 html 字符串附加到 $.mobile.pageContainer 的详细信息，那就太好了。我正在尝试这样做，但是当我到达它时，这个变量总是为空。我需要初始化它吗？

【解决方案2】：

严重挖掘这个线程。使用 jquery mobile (1.1.0)，这对我有用，.trigger("create") ...

    content = '<div data-role="page" id="myID" data-url="myID">'
    // ...
    $('body').append(content).trigger("create")
    $("<a href='#myID' data-rel='dialog'/>").trigger("click")

【讨论】：

不要说“最新”，因为这些线程存在很长时间，可能会提到具体版本。 :) 我猜你当时的“最新”版本要么是 1.0，要么是 1.1.0 之前的 alpha 版本之一，而 1.1.0rc1 是在 2012 年 2 月 28 日发布的。

【解决方案3】：

当你打电话时 $('#home').page(); 您要求 jQuery 使用页面的特定样式表和 js 函数来增强您的 div 。该页面已经存在于 DOM 中，但要显示它，您必须调用 $.mobile.changePage("#home",options)。有关更多信息（和特定于对象的选项），请参阅http://jquerymobile.com/test/docs/api/methods.html

【讨论】：