javascript - jQuery Mobile DOM 页面重用

Question

我发现 jQuery mobile 没有重用加载的页面。

$(document).on("pagecontainershow", function () {
    var activePage = $.mobile.pageContainer.pagecontainer("getActivePage");
    if (activePage.hasClass("search-page")) {

        var controller = activePage.data("controller");

        if (!controller) {

            controller = new SearchController(activePage);
            activePage.data("controller", controller);
        }

        controller.loadPage();
    }
});

然后后来...

$.mobile.pageContainer.pagecontainer("change", "search.html");

这是一个包含

的 html 文档

<div data-role="page" class="search-page">

但是，每次导航到 search.html 时，activatePage.data("controller") 为 null，因此我重新初始化我的 SearchController。

我认为 jQuery mobile 重用了已经加载到 DOM 中的页面？

Answer 1

jQuery Mobile 使用两种不同的页面模板解决方案。

• 多页面 - 每个页面都是单个 HTML 文件的一部分
• 多 HTML - 单个页面是单个 HTML 文件的一部分

您当然可以混合使用这些模板。

当 jQuery Mobile 第一次初始化时，初始 HTML 文件完全加载到 DOM 中。此内容将保留在 DOM 中，直到页面刷新(或者您强行删除它，这是一个错误的决定)。

当您转换到它时，所有其他 HTML 页面都会被加载，并且一旦您从它转换，它就会被删除。基本上，只要它处于事件状态，它就会在 DOM 中保持事件状态。

因此，简而言之，只有在初始 HTML 文件中找到的页面才会永久保留在 DOM 中，其他所有内容都会在您激活它时加载/删除。