点击后通过 JavaScript 动态创建 jQuery Mobile 页面

Question

我的 jQuery Mobile 应用由一个 index.html 页面组成，并且只包含一个带有启动链接的页面：

<div data-role="page">
  <div data-role="content">
    <a id="startPageLink" href="startPage">start</a>
  </div>
</div>

当用户点击开始链接时，我想从我的 JSON api 异步加载 startPage 的内容。在回调中，我想通过 JavaScript 为 startPage 创建所有必需的 DOM 元素并将内容添加到其中。我为此创建了一个createStartPage(data) 方法。

实现这种动态创建的页面的正确方法是什么，以便打开index.html#startPage 也有效？我认为应该有一种方法可以连接到$.mobile.changePage() 以包含自定义加载/页面创建代码，但我没有找到任何东西。或者这个问题有更好的解决方案吗？

Answer 1

我有一些时间来解决这个问题，我找到了一个可行的解决方案（经过测试）。

一些注意事项：

1. 封装在$(document).ready()中的javascript；用于在用户导航到带有哈希标记的 index.html 文件时动态创建页面（即 index.html#some_hash_mark）。
2. create_page(page_id) 函数用于从链接创建页面（或以编程方式，如果您愿意）。
3. 请注意，jquery 核心脚本和 jquery mobile css 在 $(document).ready() 语句之前加载，但 jquery mobile 脚本在之后加载。
4. 看到 body 标记已被赋予一个 id，该 id 在向其附加页面时被引用。

文档示例

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<link rel="stylesheet" type="text/css" href="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.css"/>
<script type="text/javascript" charset="utf-8" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script>
$(document).ready(function() {

    //check if hash exists and that it is not for the home screen
    if (window.location.hash != '' && window.location.hash != '#page_0') {

        //set whatever content you want to put into the new page
        var content_string = 'Some ' + window.location.hash + ' text...<br><br><a href="#page_0">go to home screen</a>';

        //append the new page onto the end of the body
        $('#page_body').append('<div data-role="page" id="' + window.location.hash.replace('#','') + '"><div data-role="content">' + content_string + '</div></div>');

        //add a link on the home screen to navaigate to the new page (just so nav isn't broken if user goes from new page to home screen)
        $('#page_0 div[data-role="content"]').append('<br><br><a href="#' + window.location.hash.replace('#','') + '">go to ' + window.location.hash.replace('#','') + ' page</a>');
    }
});
function create_page(page_id) {

    //set whatever content you want to put into the new page
    var string = 'FOO BAR page...<br><br><a href="#page_0">return to home screen</a>';

    //append the new page onto the end of the body
    $('#page_body').append('<div data-role="page" id="' + page_id + '"><div data-role="content">' + string + '</div></div>');

    //initialize the new page 
    $.mobile.initializePage();

    //navigate to the new page
    $.mobile.changePage("#" + page_id, "pop", false, true);

    //add a link on the home screen to navaigate to the new page (just so nav isn't broken if user goes from new page to home screen)
    $('#page_0 div[data-role="content"]').append('<br><br><a href="#' + page_id + '">go to ' + page_id + ' page</a>');

    //refresh the home screen so new link is given proper css
    $('#page_0 div[data-role="content"]').page();
}
</script>
<title>Fixed Headers Example</title>
<script src="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.js"></script>

</head>

<body id="page_body">
<div data-role="page" id="page_0">
<div data-role="content">Some #page_0 text...<br><br><a href="javascript: create_page('foo_bar_page');">create new page</a></div>
</div>


</body>
</html>