将 JQM 面板限制为页面上仅 1 个实例 [英] Restrict JQM Panel to only 1 instance on page

问题描述

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

/* 创建通过滑动打开左侧面板的功能 */$(document).one("pagebeforecreate", function () {$.get('left-panel.html', function(data){$.mobile.pageContainer.prepend(data);$("[数据角色=面板]").panel().enhanceWithin();//初始化面板}, "html");});

我在一个 js 文件中得到了这个脚本，该文件加载在每个页面的底部，因为移动站点"的用户可以通过任何页面进入.

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

可以说我在 JQ & 还是个新手.JQM，但我的印象是使用

$(document).one

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

如果您能帮助我找出如何预防此问题的方法，我将不胜感激.

解决方案

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

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

$(document).on("pagebeforecreate", "#pageX", function (event) {/* 对 pageX 做一些事情 */});

不像 pagecreate 可以委托到特定页面.

$(document).on("pagecreate", "#pageX", function (event) {/* 使用它来添加监听器 */});

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

$(document).on("pagebeforecreate", function (event) {var page = event.target.id;如果(页面==pageX"){/* 对 pageX 做一些事情 */}});

<小时>

为什么是 .one()?

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

替代方法:

1. 在添加之前检查是否添加了面板.

   $(document).one('pagebeforecreate', function () {var panelDOM = $("[数据角色=面板]").length;如果(面板DOM === 0){/* 添加面板 */} 别的 {/* 没有什么 */}});

   <块引用>

   演示

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

   <脚本>/* 注入面板 */$(document).on("mobileinit", function() {var panel = '<div>panel</div>';$("body").prepend(panel);});<script src="jquery.mobile-1.4.2.min.js"></script><脚本>/* 初始化 */$(函数(){$("[数据角色=面板]").panel().enhanceWithin();});

   <块引用>

   演示

I'm developing a JQM theme using single pages. I also have a side bar / panel that is built as a seperate html file. This panel is imported into the JQM page using the following JS;

/* 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");
});   

Ive got this script in a js file that is loaded at the foot of every page, since users of the 'mobile site' could enter via any page.

Ive noticed via Firebug that an instance of the panel seems to be added with every page I navigate to. So if I visit 3 pages, the panel will be loaded 3 times, 4pages = 4 panels, etc.

It's fair to say I'm fairly novice at JQ & JQM, but I was under the impression that the use of

$(document).one

meant the event only occurred once per page, and would therefore prevent the issue I have.

IF you can help me work out how I can prevent this issue, I'd really appreciate it.

解决方案

The pagebeforecreate event will emit on each and every page, but only ONCE. If you have 5 pages in one HTML file (Multi-Page Model), that event will fire 5 times before creating/showing the target page.

This event can't be delegated to a specific page, e.g. the below code won't work.

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

unlike pagecreate which can be delegated to a specific page.

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

However, you can obtain an object of that page which is being created.

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

---

Why .one()?

Since pagebeforecreate can't be delegated and it fires on each page, using .one() will run code once only. However, if you repeat the same code using .one() that code will be executed it again.

Altenative approaches:

1. Check whether panel is added before adding it.

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

   Demo

2. Use mobileinit as it fires once per document/framework. This event fires before loading jQM, so you will need to enhance/_initialize_ panel after loading jQM.

   <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

这篇关于将 JQM 面板限制为页面上仅 1 个实例的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！