jquery-mobile - JQM 1.4 - 在特定页面/选择器上使用 pagecontainer 事件的首选方式是什么？

Question

jQuery Mobile v1.4，我们是 2014 年 2 月。

所以，我读过 here (gihub)我们应该对捕获的 pagecontainer 事件创建一个 if 语句来假设加载的页面是否是预期的页面。

这里有一个小场景，试图了解新 pageContainer 小部件的预期行为及其预期用途。

就这么简单，一个登录页面，以编程方式预取欢迎页面，然后在成功登录时切换到欢迎页面。欢迎页面有一些 JS 脚本来为页面添加动画，必须仅在页面可见时启动。 我们如何做到这一点？

以下是我通过控制台调查pagecontainer 事件时得到的结果。我的目标是找到一种方法来检测我的欢迎页面(实际上是任何页面)是否处于事件/可见状态。

为了便于理解，我使用这种格式作为查询:

$( 'body' ).on( 'pagecontainerbeforeload', function( event, ui ) {
    console.log("beforeload");
    console.log(event);
    console.log(ui);
});

<小时/>

全新的开始， 当我第一次加载页面和 JQM 时(即 /Users/login)

可用的事件:

• pagecontainercreate => 空用户界面
• PCbeforetransition => ui.toPage可用
• PCshow => 仅获取 ui.prevPage(在这种情况下为空)
• PCtransition => ui.toPage可用

现在，即使您禁用了过渡效果 ( See api )，这些也会始终启动

<小时/>

好的，那么我想以编程方式加载一个页面(预取它)，我这样做:(我想要 /Users/welcome)

$("body").pagecontainer("load", "/Users/welcome");

我启动了这些事件(页面尚不可见):

• PCbeforeload => 我得到一个可以用来识别页面的网址..
• PCload => 与 PCbeforeload 几乎相同的数据

<小时/>

好吧，现在我更改我的页面:(到/Users/welcome)

$("body").pagecontainer("change", "/Users/welcome");

我触发了这些事件:

• PChide => ui.nextPage 与 ui.toPage 相同...
• PCbeforetransition => ui.toPage可用
• PCshow => 只给出ui.prevPage
• PCtransition => ui.toPage 按预期显示

<小时/>

好吧，现在我非常确定我想要用来确保加载此页面的唯一 pagecontainer 事件是 pagecontainertransition。这是我在每个需要启动 JS 的页面上实现的:

设置页面容器的 ID (PHP)

<div data-role="page" data-theme='a' id="<?php echo $this->id_url()?>">

...在页面末尾(JS)

$( 'body' ).on( 'pagecontainertransition', function( event, ui ) {
    if(ui.toPage[0] == $('#'+id_url )[0] ) {
        functionToLaunchWhenPageShowUp();
    }
} );        

现在，如您所见，我指的是 ui.toPage 第一个子 [0] 将其与 $('.selector' ) 第一个子 [0] 。 这是正确的方式吗？我的意思是，新 API 的预期方式。感谢分享您的知识;)

Answer 1

我成功地做了一些有效的事情，相对简单，并且尽可能接近 DRY 原则(不要重复自己)。

按照它们“加载”的顺序:

文档 < head > 中的 JS 脚本

<script type="text/javascript" src="/js/jquery-2.1.0.min.js"></script>
<script type="text/javascript">
  (function(){
  //Global settings for JQM 1.4.0
  $( document ).on( "mobileinit", function() {
        //apply overrides here
         $.mobile.defaultPageTransition = 'flip'; 
  });
  // The event listener in question !
  $( document ).ready(function () { //..only launched once the body exist
    // The event listener in question :
    $( 'body' ).on( 'pagecontainertransition', function( event, ui ) {
        //gets the id you programatically give to your page
        id_url = $( "body" ).pagecontainer( "getActivePage" )[0].id;
        //compare the actual event data (ui.toPage) 
        if( ui.toPage[0] == $('#'+id_url )[0] ) {
            // failsafe
            if ( typeof( window[ id_url ].initPage ) === "function" ) {   
                // call the dynamically created init function
                window[ id_url ].initPage();
            }
        }
    } );
  });

  document.loadPage = function( url ){
    $( "body" ).pagecontainer( "load", url  , options);
  };
  document.changePage = function( url ){
    $( "body" ).pagecontainer( "change", url  , options);
  };
 })();    
</script>
<script type="text/javascript" src="/js/jquery.mobile-1.4.0.min.js"></script>

每个返回页面的开头

<div data-role="page" data-theme='a' id="<?php echo $this->id_url()?>">
<div data-role="content">
<script type="text/javascript">

// we create dynamically a function named after the id you gave to that page
// this will bind it to window
this[ '<?php echo $this->id_url() ?>' ].initPage = function(){
    // put anything you want here, I prefer to use a call 
    // to another JS function elsewhere in the code. This way I don't touch the 
    // settings anymore
    NameOfThisPage.launchEverythingThatNeedsTo();
};
</script>
...

这是此代码的说明。首先，我为所有这些全局查询找到了一个位置，JQM 已经迫使我将内容放在 jquery.js 和 jquery.mobile.js 之间，所以让我们使用它。

除了全局 JQM 设置之外，我还仅使用一个事件监听器绑定(bind)到正文/文档/(无论将来是什么)。它仅在主体存在后才会启动。

现在，乐趣开始了。我以编程方式为服务器返回的每个页面提供一个 id(即使用 _ 而不是 / 的脚本路由)。然后，您创建一个以该 id 命名的函数，它附加到窗口，(我想您可以将它放在其他地方..)。

然后回到事件监听器，在转换时，您将获得通过 pagecontainer( "getActivePage" ) 设置的 id方法，使用该 id 抓取页面 jQuery 样式，然后将其与事件监听器返回的数据进行比较。

如果成功，请使用该 ID 启动您放入页面中的 init 函数。如果您没有在页面中放置初始化脚本，则有一个故障保护功能。

这里的奖励是那些 document.loadPage/changePage 。我将它们放在那里，以防更改页面的方法发生变化。修改一处即可应用于整个应用程序。这是干的^^

总而言之，如果您对改进此方法有任何意见，请请分享。 v1.4 方法非常缺乏示例(并且与 v1.3 示例有些困惑)。我已尽力分享我的发现(ps.我需要这些代表点:P)