jQuery Mobile v1.4 ，我们是2014年2月。
所以，我读过here (gihub)我们应该在cat if事件上发表pagecontainer语句，以假设加载的页面是否是预期的。
这是一个小场景，试图理解新的pageContainer小部件的预期行为，并且它是预期用途。
简单，一个登录页面，以编程方式预取欢迎页面，然后在成功登录时切换到欢迎页面。欢迎页面有一些JS脚本来动画页面，只有在页面可见时才必须启动。 我们如何做到这一点？
以下是我在通过控制台调查 pagecontainer事件时获得的结果。我的目标是找到一种方法来检测我的欢迎（实际上任何页面）页面 是否有效/可见。
为了理解，我使用这种格式作为查询：
$( 'body' ).on( 'pagecontainerbeforeload', function( event, ui ) {
console.log("beforeload");
console.log(event);
console.log(ui);
});
如此新鲜的开始， ，当我加载页面＆amp; JQM第一次（即/Users/login）
可用的事件：
现在，即使您禁用了过渡效果（See api）
，也会始终启动这些效果好的，然后我想以编程方式加载页面（预取它），我这样做:(我想要/Users/welcome）
$("body").pagecontainer("load", "/Users/welcome");
我启动了这些活动（页面尚未显示）：
好的，现在我去更改我的页面:(到/Users/welcome）
$("body").pagecontainer("change", "/Users/welcome");
我触发了这些事件：
很好，现在我非常确定我要使用的唯一一个pagecontainer事件，以确保加载此页面是pagecontainertransition。以下是我在每个需要启动JS的页面上实现的内容：
设置页面容器（PHP）的ID
<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的预期方式。感谢分享您的知识;）
答案 0 :(得分：6)
我设法做了一些有效的事情，相对简单，并且尽可能接近DRY原则（不要重复自己）。
按照他们“加载”的顺序：
＆lt;中的JS脚本头＆gt;文件
<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＆amp;之间。 jquery.mobile.js，让我们使用它。
与全局JQM设置一起，我使用只有一个事件监听器绑定到body / document /（将来它将会是什么）。它只在身体存在时启动 。
现在，这里的乐趣开始了。我以编程方式为服务器返回的每个页面提供一个id（即使用 _ 而不是 / 的脚本路由）。然后创建一个以该id命名的函数，它附加到窗口，（我想你可以将它放在别处......）。
然后回到事件监听器，在转换时，你得到你通过pagecontainer( "getActivePage" )方法设置的id，使用该id来获取页面jQuery样式，然后将它与事件监听器返回的数据进行比较
如果成功，请使用该ID启动您在页面中放置的init函数。如果你没有在页面中放置一个init脚本，那就有一个故障保护。
这里的奖励，是那些document.loadPage / changePage。我把它们放在那里，以防更改页面的方法发生变化。一个地方需要修改，它将适用于整个应用。那是DRY ^^
总而言之，如果您对改进此方法的方法发表评论， 请 分享。 v1.4方法的例子非常缺乏（与v1.3示例有点混淆）。我试图尽我所能分享我的发现（ps。我需要那些代表点：P）