如何向 jQuery Mobile 添加页面特定逻辑？

Question

我读过here，您不能在每个jqMobile 页面上使用$(document).ready()。相反，建议使用pageInit() 和pageCreate()。这一切都很好，但我不太确定如何实施它。

假设我有一个 URL 列表，这些 URL 都指向单独的报告。每个报告都会有各种需要在页面加载时发生的事情。

我是否必须将所有页面逻辑放入主页中？

这是一个笼统的问题，但我会举一个具体的例子来说明我正在尝试做的事情。

MVC3 Layout 页面包含我的 head 元素以及所有脚本引用。

然后我有我的索引页：

<div data-role="page" data-add-back-btn="true">

<div data-role="content">
    <div class="content-primary">
        <ul data-role="listview" data-theme="a">
            <li data-role="list-divider" data-theme="a">Category 1</li>
            <li><a href="someUrl" data-transition="slideup">Link 1</a></li> 
        </ul>
    </div>
</div>

然后是我的报告的单独登录页面：

<div data-role="page" data-add-back-btn="true">  
<div data-role="header" data-theme="a">
    <h1>Report 1</h1>
    <a id="btnOpts" data-icon="gear" class="ui-btn-right" data-rel="dialog" data-transition="pop">Options</a>
</div>

然后我的选项对话框的最后一页：

<div id="dlgOpts" data-role="page" data-theme="a">

<div data-role="content">

    <h2>Please select the report options:</h2>

    <div data-role="fieldcontain">
        <label for="startDate">Start Date:</label>
        <input type="date" id="startDate" data-role="datebox" data-options='{"mode": "datebox"}' />
    </div>

    <div data-role="fieldcontain">
        <label for="endDate">End Date:</label>
        <input type="date" id="endDate" data-role="datebox" data-options='{"mode": "calbox"}' />
    </div>

    <div class="ui-grid-a">
        <div class="ui-block-a"><a href="#" data-icon="back" data-role="button" data-rel="back">Cancel</a></div>
        <div class="ui-block-b"><a href="#" data-icon="check" data-role="button" data-rel="back">Ok</a></div>
    </div>
</div>

我的目标是从列表中加载报告，当报告加载时，显示选项对话框。如果我将它内嵌在页面中，它总是会循环回到选项，因为它会在对话框关闭时触发（我猜这是它下方页面的完全重新加载？）。

简而言之：如何在我的报告页面加载时加载对话框，然后在选项对话框关闭时执行某事？

Answer 1

我喜欢在每个 HTML 文档的末尾包含我的站点范围的 JavaScript，因此如果用户在站点的任何页面上刷新页面，该 JavaScript 将加载并可供站点使用。我的结构看起来像这样：

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="initial-scale=1.0,maximum-scale=1.0,user-scalable=no" />
    <title>My Fancy Mobile Title</title>
    <link rel="stylesheet" href="//code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" />
    <link rel="stylesheet" type="text/css" href="library/css/default.css">

    <script src="//code.jquery.com/jquery-1.6.4.min.js"></script>
    <script src="//code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>
</head>
<body>
    <div data-role="page" id="home">
        <div data-role="content">
            <!-- Content Here -->
        </div>
    </div>

    <script src="library/js/default.js"></script></script>

</body>
</html>

请注意，jQuery Mobile 包含在文档的 <head> 中，并且我的自定义 JavaScript (default.js) 包含在页面底部以不阻止页面呈现。

现在使用$(document).ready();的jQuery Mobile版本：

$('[data-role="page"]').live('pagecreate', function () {
    //code here will run each time a page is enhanced by jQuery Mobile, which will be once per page
});

$('[data-role="page"]').live('pageshow', function () {
    //code here will run each time a page is navigated to, which can be many times if the user navigates away and back
});

//you can also bind to specific pages
$('#home').live('pageshow', function () {
    //code here will run each time the `#home` page is shown
});

//you can bind to any selector that selects the `data-role="page"` elements
$('.page_element_class').live('pageshow', function () {
    //code here will run each time any page with the `.page_element_class` class is shown
});

还要小心使用 ID，因为它们在整个站点范围内必须是唯一的，如果两个页面有一个具有相同 ID 的元素，则会导致问题，因为许多页面会同时在 DOM 中。

Answer 2

“它总是循环回到选项，因为它会在对话框关闭时触发（我猜这是它下面页面的完全重新加载？）。”

我认为这是因为您缺少 A 标签上的 HREF 属性 - 您尝试打开的对话框的名称是什么？

<a id="btnOpts" data-icon="gear" class="ui-btn-right" data-rel="dialog" data-transition="pop">Options</a>

这可能是整个页面刷新而不是让 JQM 为您加载该对话框的原因。 一旦成功，您可以使用@Jasper 提供的建议，即

$("#dialogname").live("pagebeforeshow", function(e, data){
  // here you prepare your dialog contents
});

$("#dialogname").live("pagebeforehide", function(e, data){
 // here you finalize before your dialog disappears
});

希望对你有帮助