解决AF3 诡异的页面显示问题
使用AF3开发应用，发现有一个bug，在同一个view下面的不同页面切换后，这时候切换到别的view中的页面，然后再切换到上一个view下的页面，此时只要目标不是刚才前一个view中的最后显示页面就会出问题，因为此时只显示最后的页面！
调试后发现是由于最后的活动页面的active类没有被移除，我希望找到合适的事件来自己执行这个任务。因此跟踪了view和panel的事件。下面是我记录的AF3下 panel组件的切换过程触发的事件记录。
//### 过程1：viewHome.pageHome --> viewLogin.page_login ****************** page_login panelbeforeload ****************** viewLogin panelbeforeload ****************** page_login panelbeforeunload ****************** viewLogin panelbeforeunload ****************** viewHome panelunload ****************** viewLogin panelload ****************** page_login panelload ****************** viewLogin panelload //### 过程2(:back)：viewLogin.page_login --> viewHome.pageHome ****************** pageHome panelbeforeload ****************** viewHome panelbeforeload ****************** pageHome panelbeforeunload ****************** viewHome panelbeforeunload ****************** viewHome panelload ****************** viewLogin panelunload //### 过程3：viewHome.pageHome --> viewLogin.page_login ****************** page_login panelbeforeload ****************** viewLogin panelbeforeload ****************** page_login panelbeforeunload ****************** viewLogin panelbeforeunload ****************** viewHome panelunload ****************** viewLogin panelload ****************** page_login panelload ****************** viewLogin panelload //### 过程4：viewLogin.page_login --> viewLogin.page_register ****************** page_register panelbeforeload ****************** viewLogin panelbeforeload ****************** page_login panelbeforeunload ****************** viewLogin panelbeforeunload ****************** page_login panelunload ****************** viewLogin panelunload ****************** page_register panelload ****************** viewLogin panelload //### 过程5：viewLogin.page_register --> viewLogin.page_login ****************** page_login panelbeforeload ****************** viewLogin panelbeforeload ****************** page_register panelbeforeunload ****************** viewLogin panelbeforeunload ****************** page_register panelunload ****************** viewLogin panelunload ****************** page_login panelload ****************** viewLogin panelload
发现如下问题：
1，不同view下panel切换：
transition不带:back的时候，原panel和view有unload事件；
如果带有:back，则原panel没有unload事件，原view有unload事件
2，同一view下panel切换：
transition不带:back的时候，原panel有unload事件，view竟然也有unload事件！！；
如果带有:back，则原panel没有unload事件，view有unload事件！！
想起应该是冒泡事件捣乱，遂在panel的事件中停止冒泡，再次重复上面过程：
//### 过程1：viewHome.pageHome --> viewLogin.page_login ****************** page_login panelbeforeload ****************** page_login panelbeforeunload ****************** viewHome panelunload ****************** viewLogin panelload ****************** page_login panelload //### 过程2（:back）：viewLogin.page_login --> viewHome.pageHome ****************** pageHome panelbeforeload ****************** pageHome panelbeforeunload ****************** viewLogin panelunload ****************** viewHome panelload ****************** pageHome panelload //### 过程3：viewHome.pageHome --> viewLogin.page_login ****************** page_login panelbeforeload ****************** page_login panelbeforeunload ****************** viewHome panelunload ****************** viewLogin panelload ****************** page_login panelload //### 过程4：viewLogin.page_login --> viewLogin.page_register ****************** page_register panelbeforeload ****************** page_login panelbeforeunload ****************** page_login panelunload ****************** page_register panelload //### 过程5：viewLogin.page_register --> viewLogin.page_login ****************** page_login panelbeforeload ****************** page_register panelbeforeunload ****************** page_login panelload ****************** page_register panelunload
这下子逻辑清晰了：
一、不同view之间的页面切换：
原view有unload事件，新view有load事件；新panel有beforeload、beforeunload，load事件。
二、同一个view之中的页面切换：
原panel有beforeunload、unload事件，新panel有beforeload、load事件；view没有事件！
$('.view,.panel').on('panelbeforeload panelbeforeunload panelload panelunload',function(E){
var el=$(this);
if(el.hasClass('panel')){E.preventDefault();E.stopPropagation();}
if(el.hasClass('panel') && E.type=='panelunload'){el.removeClass('active');}
if(el.hasClass('view') && E.type=='panelunload'){el.find('.panel').removeClass('active');}
});
