(以后有分享的东西,一定尽早写出来。这一拖不知不觉就两三个月了)

因为项目需要,当界面返回时需要刷新之前的界面,网上也没找到这方面的资料,最终选择从源码着手,找到了解决问题的方案。

通过查看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方法类似。