4

我正在使用 jQuery Mobile 进行一些测试，并试图弄清楚如何设置应用程序及其各个页面。理想情况下，我希望框架加载带有过渡的页面，但仍保持每个页面清晰分开。特别是，似乎通过 Ajax 加载的页面并没有“清除”前一页的 JavaScript 或 CSS：

示例 1 - JavaScript

例如，如果我有这样的东西page1.html：

<script>
    setInterval(function() {
        console.info('Interval' + (new Date()));
    }, 1000);
</script>

然后，如果我加载page2.html，间隔仍在运行。如果我回到page1，就会开始一个新的间隔，所以现在有两个间隔在运行，每次我回到 3 和 4 等等page1。

示例 2 - CSS

另一个问题是样式。假设两个开发人员在两个不同的页面上独立工作，创建一个元素my-element。在page1中，此元素的样式为：

<style>
    #my-element {
        color: red;
    }
</style>

<span id="my-element">This one is red</span>

在 中page2，元素没有样式：

<span id="my-element">This one has no style</span>

再一次，如果我去page1.htmlfirst 然后page2.html，my-element最终会变成红色，即使它没有被设置为page2.html.

所以我想我有两个问题：

  1. 目前，加载页面的 jQuery Mobile 方法似乎根本无法扩展。CSS，JS 在一个页面上创建，继续到下一个页面。那么有什么方法可以让 jQuery Mobile 加载页面“干净”。即完全删除上一页中的所有内容，以便JS或CSS位不会影响下一页？

  2. 如果不是，那么在 jQuery Mobile 中以可扩展的方式处理多个页面的正确方法是什么？

4

1 回答 1

3

您所描述的行为是使 JQM 工作的原因。您的 DOM 会持续存在（包括您加载的第一页的 js 和 css），直到您使用 'data-ajax=false' 或 'rel=external' 加载页面，这将执行常规页面加载（无 ajax）。

通过 ajax 加载页面，您将在 DOM 中至少有两个页面 - 您开始的页面（如锚页面）和您通过 ajax 加载的任何其他页面（加载下一页后将被删除）。 

这种方法允许具有可以跨页面共享的转换和其他功能。

您仍然可以使用 js/css 轻松定位特定页面。我总是在我的应用程序中运行一个 controller.js 文件，它通过绑定到任何 JQM 事件（pagebeforeshow、pageshow...）来处理特定于页面的事情。同样对于页面特定的 css，只需使用 page id 属性来使 css 页面特定。

于 2012-11-04T07:40:20.437 回答