3

在我的站点中，我看到在浏览器的前进按钮选择期间调用了 pageinit。这个对吗。这不会绑定注册的事件两次。

第一个.html

<!DOCTYPE HTML>
<html>
    
    <head>
        <title>Test1</title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" />
        <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
        <script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>
        <script src="../scripts/common.js"></script>
    </head>
    
    <body>
        <div data-role="page" id="first">
             <h1 style="background: red">Swipe 1</h1>
         <a href="second.html">Click</a>
        </div>
    </body>

</html>

第二个.html

<!DOCTYPE html>
<html>

    <head>
        <title>Test2</title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" />
        <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
        <script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>
        <script src="../scripts/common.js"></script>
    </head>

    <body>
        <div data-role="page" id="second">
            <div data-role="header">
                <h1>jQuery Mobile</h1>
            </div>
            <div data-role="content">   
              <a href="third.html">Click</a>
            </div>
            <div data-role="footer">
                <h4>www.jboss.org/developer</h4>
            </div>
        </div>
    </body>

</html>

第三个.html

<!DOCTYPE html>
<html>

    <head>
        <title>jQuery Mobile Template</title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" />
        <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
        <script type="text/javascript" src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>
    </head>

    <body>
        <div data-role="page" id="third">
            <div data-role="header">
                    <h1>jQuery Mobile</h1> 
            </div>
            <div data-role="content">
                <ul id="listOfItems" data-role="listview" data-inset="true" data-filter="true">
                    <li><a href="">One</a>
                    </li>
                    <li><a href="">Two</a>
                    </li>
                    <li><a href="">Three</a>
                    </li>
                </ul>
            </div>
            <div data-role="footer">
                <h4>www.jboss.org/developer</h4> 
            </div>
        </div>
    </body>

</html>

common.js

$(document).on('pageinit', "#first", function (event) {
    console.log("first");
});


$(document).on('pageinit', "#second", function (event) {
    console.log("second");
});


$(document).on('pageinit', "#third", function (event) {
    console.log("third");
});

你能检查一下上面的代码，让我知道为什么每次都调用 pageinit。

4

2 回答 2

5

介绍

在我们讨论页面事件之前，我们需要先谈谈 jQuery Mobile 页面架构。可以通过两种不同的方式创建 jQuery Mobile 应用程序，多页面模板或多个HTML页面。

不同的 jQuery Mobile 页面架构

多页模板

在这种模板中，所有内容都加载到DOM. 无论用户从一个页面转换到另一个前一页面多少次，都将保持加载到DOM. 虽然这是在页面之间平滑过渡的最佳解决方案，但它会给DOM. 这在桌面浏览器上通常不是问题，但移动浏览器可能会受到影响，尤其是在低端设备上。

多 HTML 模板

此模板解决方案需要多个HTML页面。这是大型移动应用程序构建的绝佳选择，但有一个问题。与多页面模板不同，每次访问页面时，它都会加载到DOM. 在速度较慢的设备上，它可能会导致转换问题，尤其是在目标页面很大的情况下。这可以通过页面预取来解决，其中 jQuery Mobile 在主页面加载并pagecreate触发事件后在后台加载目标页面。BUT还有另一个大问题，这在 jQuery Mobile 文档中没有充分描述。在页面转换期间，前一页将从DOM. 这样做是为了防止DOM. 这也可以通过另一个名为的属性来防止：

data-dom-cache="true"

或通过初始化全局参数：

$.mobile.page.prototype.options.domCache = true;

页面架构如何影响页面事件

jQuery Mobile 有几个页面事件（更多关于它的信息可以在这里或这里找到）。他们在这里涵盖整个页面加载/转换过程。高级 jQuery Mobile 用户知道使用pageinit事件而不是 jQuery 经典document ready事件。就像document ready,pageinit在这里只在页面初始化期间触发一次。

但是有一个问题，pageinit在DOM. 如果页面从DOM（在多 HTML 模板中）删除并再次加载pageinit将再次触发。

简而言之，每个页面DOM初始化都会触发新的页面事件初始化。如前所述，这可以通过页面兑现来防止。

页面兑现的影响

这几乎是jQuery Mobile开发人员的禁忌主题，所以让我告诉你，没有必要害怕页面兑现。相信我，jQuery Mobile 是一个健壮的框架，它通常可以在所有可用的平台上运行良好。与 jQuery Mobile 相关的大量投诉与其大 DOM 大小要求没有直接关系，因此不必担心兑现。

这并不意味着你应该DOM像喝醉的水手一样填满。每个应用程序的开发都必须提前计划。最常用的页面必须永久保留在 DOM 中。其他一切都应临时使用（在需要时加载/删除）。

于 2013-06-07T14:04:45.713 回答
2

已编辑：
似乎在使用多页模板方法（包含所有页面的单个 html）时pageinit会触发一次，因为页面在 DOM 中加载并在页面之间转换时保留在那里。

但是，当使用多个页面并通过 Ajax 导航时，您会注意到页面包含data-external-page="true"除第一页之外的属性。即使您使用 domCache false，第一页也始终缓存在 DOM 中。但是除了第一页之外的页面在您离开后会被加载并清除。这就是为什么pageinit在后退/前进按钮点击时触发。

domCache设置在用户离开页面后是否将页面保留在 DOM 中。你可以在jQM docs上阅读它。默认情况下，domCache选项的值为false。

添加：

$(document).on('mobileinit', function () {
    $.mobile.page.prototype.options.domCache = true;
});

jQuery js 和 jQuery Mobile js 之间会导致页面缓存在 DOM 中。因此 pageinit 不会触发。

另一种方法是添加data-dom-cache="true"你的锚。

使用 domCache的缺点是 DOM 可能很大，导致内存问题。在这种方法中，DOM 管理留给了开发人员。

最后确保您在页面中使用相同的 jQ、jQM 版本。前 2 页使用 jQ 1.9.1、jQm 1.3.1，第三页使用 jQ 1.7.1、jQM 1.1.0。这与具体问题无关，但值得一提。

我希望这有帮助。

于 2013-06-05T17:21:00.317 回答