所以,我已经阅读了here (gihub),我们应该在catched pagecontainer事件上创建一个if语句,以假设加载的页面是否是预期的页面.
这是一个小场景,试图理解新的pageContainer小部件的预期行为,并且它是预期用途.
这很简单,一个登录页面,以编程方式预取欢迎页面,然后在成功登录时切换到欢迎页面.欢迎页面有一些JS脚本来设置页面动画,只有在页面可见时才必须启动.我们怎么做？
以下是我通过控制台调查pagecontainer事件时得到的结果.我的目标是找到一种方法来检测我的欢迎(实际上任何页面)页面是否处于活动/可见状态.
为了理解,我使用这种格式作为查询：
$( 'body' ).on( 'pagecontainerbeforeload',function( event,ui ) {
console.log("beforeload");
console.log(event);
console.log(ui);
});
如此新鲜的开始,当我加载页面& JQM第一次(即/ Users / login)
可用事件：
> pagecontainercreate =>空的ui
> 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的页面上实现的内容：
<div data-role="page" data-theme='a' id="<?PHP echo $this->id_url()?>">
…在页面的末尾(JS)
$( 'body' ).on( 'pagecontainertransition',ui ) {
if(ui.toPage[0] == $('#'+id_url )[0] ) {
functionToLaunchWhenPageShowUp();
}
} );
现在,正如你所看到的,我指的是ui.toPage 1st child [0]将它与$(‘.selector’)第一个孩子[0]进行比较.这是正确的方法吗？我的意思是,新API的预期方式.感谢分享您的知识;)
解决方法
按顺序将它们“加载”：
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',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",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设置一起,我只使用一个事件监听器绑定到正文/文档/(无论将来是什么).它只在身体存在时才会发动.
现在,这里是有趣的开始.我以编程方式为服务器返回的每个页面提供一个id(即使用_而不是/的脚本路由).然后创建一个以该id命名的函数,它附加到窗口,(我想你可以将它放在别处……).
然后回到事件监听器,在转换时,你得到你通过pagecontainer(“getActivePage”)方法设置的id,使用该id来获取页面jQuery样式,然后将它与事件监听器返回的数据进行比较.
如果成功,请使用该ID启动您在页面中放置的init函数.如果您没有在页面中放置init脚本,则会出现故障保护.
这里的奖励是那些document.loadPage / changePage.我把它们放在那里,以防改变页面的方法发生变化.一个地方需要修改,它将适用于整个应用程序.那是DRY ^^
总而言之,如果您对改进此方法的方法发表评论,请分享. v1.4方法的例子非常缺乏(与v1.3示例有点混淆).我试图尽我所能分享我的发现(ps.我需要那些代表点：P)
