让 js 和 css 与 Ratchet 的 push.js 一起工作

Question

我正在使用 Ratchet 构建一个 phonegap 应用程序。我在底部有一个标签栏，点击图标会将用户带到特定视图。

我的设置基本上是这样的：1.html、1.js、1.css和2.html、2.js、2.css 我正在使用 Ratchet 的 push.js 在两个 html.

之间切换

问题出在 push.js，未加载任何 scripts/css。因此，如果我从 1.html 切换到 2.html，则不会加载 2.js、2.css。另外，我猜cordova.js也需要每次加载。

有解决办法吗？谷歌搜索让我

window.addEventListener('push' function(){});

这可能适用于 js 但不适用于 css?

Answer 1

Push.js 将使用 ajax 动态加载 2.html。您希望从页面到的任何 javascript 或样式都应加载到页面 1.html 中。导航后，Push.js 将解析出 2.html 中的内容并将这些内容区域与 1.html 中的内容交换。您在 2.html 中的 javascript 和 css 将不会被应用。

您可以将事件处理程序添加到您发现的 push 事件中，人们将连接到该事件处理程序以在加载页面时加载 javascript。对我来说，这意味着可能有更好的方法。

Answer 2

我知道这已经得到解答。但是，我只是对 Ratchet.js 进行了更改，以使每个页面都可以使用单独的 js。请查看：https://github.com/mazong1123/ratchet-pro

您需要做的是： 1. 在 html:

中指定数据页属性

<body>
    <div class="content" data-page="index">
    Put page content here.
    </div>
    <script src="scripts/app-index.js"></script>
</body>

在您的 js 文件中添加以下标准 js 代码段：

(function () {
    // Change the settings here if you want.
    //window.RATCHET.Class.PageManager.settings.pageEntryScriptPath = 'scripts'
    //window.RATCHET.Class.PageManager.settings.pageEntryScriptPrefix = 'app-' 

    var rachetPageManager = new window.RATCHET.Class.PageManager();
    rachetPageManager.ready(function () {
      // Put your code here.
    });
})();

完成。只需为每个页面重复上述步骤。每次页面更改时，您都会执行脚本。

注意：这仅适用于 js。对于 css，很遗憾，您必须将所有 css 个文件合并为一个，并在您的入口页面中引用它。

让 js 和 css 与 Ratchet 的 push.js 一起工作

Make js and css work with Ratchet's push.js

javascript

html

cordova

phonegap-build

ratchet