7

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

所以，我在这里（gihub）读到，我们应该对捕获的事件if发表声明，pagecontainer以假设加载的页面是否是预期的。

这是一个试图了解新 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可用

现在，即使您禁用了过渡效果，这些也会始终启动（请参阅 api）

好的，然后我想以编程方式加载一个页面（预取它），我这样做：（我想要/Users/welcome）

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

我启动了这些事件（页面尚不可见）：

  • PCbeforeload => 我得到一个 url，我可以用它来识别页面..
  • 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.toPage1st child[0]以将其与$('.selector')1st child 进行比较[0]。这是正确的方法吗？我的意思是，新 API 的预期方式。感谢分享您的知识；）

4

1 回答 1

6

我设法做了一些可行的、相对简单的事情，并且尽可能接近 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 设置之外，我只使用一个绑定到 body/document/ 的事件侦听器（无论将来会是什么）。它只有在身体存在时才会启动。

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

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

如果成功，请使用该 id 启动您在页面中放置的 init 函数。如果您没有在页面中放置初始化脚本，则会出现故障保护。

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

总而言之，如果您对改进此方法的方法有意见，请分享。v1.4 方法的示例非常缺乏（与 v1.3 示例有点混淆）。我试图尽我所能分享我的发现（ps。我需要那些代表点：P）

于 2014-02-04T13:28:01.160 回答