(以后有分享的东西,一定尽早写出来。这一拖不知不觉就两三个月了)
因为项目需要,当界面返回时需要刷新之前的界面,网上也没找到这方面的资料,最终选择从源码着手,找到了解决问题的方案。
通过查看AppFramework的源码发现,点击界面上的返回按钮时js方法调用顺序如下:
goBack->loadContent->loadDiv->parsePanelFunctions。
我们看一下parsePanelFunctions方法的注释信息:
/**
* This is used when a transition fires to do helper events. We check to see if we need to change the nav menus, footer, and fire
* the load/onload functions for panels
```
$.ui.parsePanelFunctions(currentDiv, oldDiv);
```
* @param {object} what current div
* @param {object=} oldDiv old div
* @param {boolean=} goBack
* @title $.ui.parsePanelFunctions(currentDiv, oldDiv);
* @api private
*/
简单的意思就是,这个方法是界面切换时候调用的方法,检查是否需要改变导航菜单及底部的信息以及触发panel的load/onload方法。这个时机也是刷新页面的时机。
我返回刷新页面的思路是这样的,为描述方便,当前界面叫p2,待返回的界面叫p1。
从p2返回时,p2设置需要返回刷新,appframework.js在返回界面的时候,调用p1的刷新界面的方法。
对appframework.js parsePanelFunctions方法进行修改,修改如下:
var refresh;
if (oldDiv) {
fnc = oldDiv.getAttribute("data-unload");
refresh = oldDiv.getAttribute("refresh");
if(fnc)
this.dispatchPanelEvent(fnc,oldDiv);
$(oldDiv).trigger("unloadpanel");
}
var fnc = what.getAttribute("data-load");
if(fnc)
this.dispatchPanelEvent(fnc,what);
//添加返回时页面刷新
fnc = what.getAttribute("data-back");
if(fnc && goBack && refresh){
this.dispatchPanelEvent(fnc,what);
}
可以看出,返回时,如果需要刷新界面,就会调用p1界面的data-back方法,可以在该方法内编写刷新界面的逻辑。
使用示例:
p1:
<div id="p1" class="panel" data-back="reload">
//界面内容
<script>
function reload(){
//刷新界面
}
</script>
</div>
p2:
<div id="p2" class="panel" refresh="true">
</div>
或者动态为p2添加refresh属性
<div id="p2" class="panel">
<script>
function xx(){
$('#p2').attribute("refresh","true");
}
</script>
</div>
这就是我的刷新界面的方法,其实如果懂Android开发的,这跟Android的startActivityForResult方法类似。