Question

这有点令人困惑，所以我想知道现在正确的方法，初始化你的多页面应用程序。

<head>
// include multiple JS files

<script>

// page init   

</script>
</head>

对于页面init，我尝试过：

$(function() {

// or 
$("div[data-role='page']").on("pagecreate", function() {


// or
$(document).on("pagecreate", function() {

我注意到包含JS文件都是在页面init之前“运行”的。从JS文件调用“页面初始化”中的函数是不可能的......现在它们看起来像：

// ab.js

function a() {}

function b() {}

// so on

JS文件中的所有函数是否也应该在某种init中？像：

// JS file ab.js
$(function()
{
    function a() {}
    function b() {}
});

这个问题可能有点不清楚，但我只是感到困惑，因为JQM一直在变化，我想知道今天的“最佳”方式是什么......

Answer 1

首先，您需要了解jQuery Mobile 1.4事件之间的区别;那些在页面上发出一次并且在 pagecontainer 上连续发出的那些。

添加听众，例如click，tap，change等。在pagecreate中包装它们及其自定义功能。该事件每页触发一次，因此您需要指定#pageID才能将这些侦听器添加到该页面。如果您未能指定页面，那么只要在页面上发出pagecreate，就会反复添加这些侦听器。

您也可以使用pagecreate来操纵DOM并动态注入元素。

$(document).on("pagecreate", "#pageID", function () {
   <!-- listeners -->
});

要在显示/隐藏页面时操纵DOM，您需要收听 pagecontainer 事件。这些事件会在 pagecontainer 上不断触发，因此，在此处添加侦听器并不是一个好主意。使用它们来添加，删除，隐藏，显示，重置等等，但是，新的 pagecontainer 事件无法附加到特定的#pageID。您需要检查哪个页面处于活动状态或哪个页面将被隐藏。

$(document).on("pagecontainershow", function () {
  var activePage = $.mobile.pageContainer.pagecontainer("getActivePage"),
      activePageID = activePage[0].id;

  if (activePageId == "pageA") {
    $(elm1).hide();
    $(elm2).show();
  }
});

更新

自执行函数的使用 $(function () { });仅限于jQM中的特定情况。它们用于初始化可以在外部使用的小部件，即面板，工具栏和弹出窗口。

$(function () { });中包含的代码将在加载后立即执行。

初始化多页面jQuery Mobile的最佳方法

1 个答案:

更新