将 JQM 面板限制为页面上只有 1 个实例

Question

我正在使用单页开发 JQM 主题。我还有一个侧边栏/面板，它是作为单独的 html 文件构建的。该面板使用如下JS导入JQM页面；

/* Creates the functionality to open the left side panel with a swipe */
$(document).one("pagebeforecreate", function () {
  $.get('left-panel.html', function(data){ 
    $.mobile.pageContainer.prepend(data);
    $("[data-role=panel]").panel().enhanceWithin(); // initialize panel
  }, "html");
});   

我在每个页面底部加载的 js 文件中都有这个脚本，因为“移动网站”的用户可以通过任何页面进入。

我通过 Firebug 注意到，我导航到的每个页面似乎都添加了一个面板实例。所以如果我访问 3 个页面，面板将被加载 3 次，4pages = 4 个面板，等等。

公平地说，我在 JQ 和 JQM 上还是个新手，但我的印象是使用

$(document).one

意味着该事件每页只发生一次，因此可以防止我遇到的问题。

如果您能帮助我解决如何防止此问题，我将不胜感激。

Answer 1

pagebeforecreate 事件将在每个页面上发出，但只会触发一次。如果您在一个 HTML 文件（多页模型）中有 5 个页面，则该事件将在创建/显示目标页面之前触发 5 次。

此事件不能委派到特定页面，例如下面的代码不起作用。

$(document).on("pagebeforecreate", "#pageX", function (event) {
  /* do something to pageX */
});

与pagecreate 不同，后者可以委派到特定页面。

$(document).on("pagecreate", "#pageX", function (event) {
  /* use it to add listeners */
});

但是，您可以获取正在创建的页面的对象。

$(document).on("pagebeforecreate", function (event) {
  var page = event.target.id;
  if ( page == "pageX") {
    /* do something to pageX */
  }
});

---

为什么是.one()？

由于pagebeforecreate 不能委派并且它会在每个页面上触发，因此使用.one() 将只运行一次代码。但是，如果您使用 .one() 重复相同的代码，该代码将再次执行。

替代方法：

1. 添加前检查面板是否添加。

   $(document).one('pagebeforecreate', function () {
       var panelDOM = $("[data-role=panel]").length;
       if (panelDOM === 0) {
           /* add panel */
       } else {
           /* nothing */
       }
   });
   

   Demo

2. 使用mobileinit，因为它会在每个文档/框架中触发一次。此事件在加载 jQM 之前触发，因此您需要在加载 jQM 后增强/_initialize_ 面板。

   <script src="jquery-1.9.1.min.js"></script>
   <script>
       /* inject panel */
       $(document).on("mobileinit", function() {
           var panel = '<div>panel</div>';
           $("body").prepend(panel);
       });
   </script>
   <script src="jquery.mobile-1.4.2.min.js"></script>
   <script>
       /* initialize it */
       $(function() {
           $("[data-role=panel]").panel().enhanceWithin();
       });
   </script>
   

   Demo