jQueryMobile重新刷新页面

移动互联网的开发越来越火,进来闲的无聊,决定自己尝试和研究一下jQueryMobile。虽然它已经出现了很多年,也并不算是新鲜的玩意儿,但是,平日里我多是在自己开发UI完成日常工作,并没有真正使用jQueryMobile来做一个实际项目。

朋友有一个项目,我来帮忙看一看,一个手机端Web网站,在能够在微信浏览器上查看。由于功能简单,结构比较清晰,所以我决定使用jQueryMobile做界面,handlebars做前端的模板引擎,与后台通过ajax通信。大致的架构清晰了,迅速开干。

在完成了静态页面之后,我感觉jQueryMobile确实比较方便,开发速度很快,完全不用考虑具体的UI开发,直接用即可。可是很快问题就来了,由于jQueryMobile是在加载页面之后就进行渲染的,因此,通过ajax获取数据后直接更新页面的内容并不能让jQueryMobile重新渲染整个页面。

google了一下午,终于搞定了,其实解决这个问题并不复杂,但是查找这个问题所耗费的时间不少,于是记录下来和大家分享。

为了说明这个问题,下面给出一个最简单的代码:

<body class="leyoubird" id="test">  
    <div data-role="page" id="home">
        <div class="le-loading">Loading...</div>
    </div>
</body>  

让我们的页面在一上来就发送ajax请求后台数据,这样做的好处就是前后端分离,甚至前后端的服务器可以运行在不同的环境下。所以,手机打开之后是这样的界面:

然后就是等待ajax返回数据,在接收到数据后,显示handlebars处理模板:

var onSuccess = function (data){  
    var source = $('#entry-template').html();
    var template = Handlebars.compile(source);
    var html = template(data);
}

一切搞定,html已经处理完毕,下面就是加入到页面上:

$('#home').empty().append(html);

一切ok,我们运行一下试试。一下傻眼了,界面雪白一片,毛都没有。这是为何?光是这个问题,我就查了好久,先是排除是不是自己的问题,包括JS代码,CSS样式。一切未果之后,google之,终于了解到,jQueryMobile不能自动感知HTML元素的变化,需要手动触发。原来如此,然后开始了在官网上的苦苦寻找。一个小时过去了,毛收获都没有,这里要吐槽一下jQueryMobile的官网,Demo和API看起来很唬人,但是等你真正开发之后,你会发现它的条理性太差,根本不能找到这方面的东西。

无奈,继续google之,终于找到了一个方式:trigger('create')。就这么简单?没错。但前提是得用对地方(之前有段时间总是不对的原因是trigger的元素不对,总是trigger新加上的DOM,突然意识到:新加的DOM没有jQM的事件呢...),所以开始修改onSuccess方法:

var onSuccess = function (data){  
    var source = $('#entry-template').html();
    var template = Handlebars.compile(source);
    var html = template(data);

    $('#home').empty().append(html).trigger('create');
}

运行之后,太完美了!

下拉菜单中的数据都是ajax传过来的。虽然是整个页面刷新,但是这个方式同样可以只用于listview局部的组件更新。

解决这个问题之后,我觉得应该仔细看看它的原因,希望能有更多收获。因为在stackoverflow上,有人提到了触发refresh事件这个方法,但是在我这儿没什么效果。最后,终于找到了看起来比较靠谱的消息:Content injected into a page is not enhanced.。上面的原文总结如下:

  • jQM不能自动感知页面的任何页面的原文变化
  • 通过触发父节点的trigger('create')可以迫使jQM重新初始化所有子节点样式。
  • trigger('create').trigger('refresh')是不同的。前者用于触发标记中的一个或多个界面的init方法,一般用于新的元素。后者用于更新已经渲染好的组件,一般用于单个组件中的数据更新。

顺道说一句,google搜索甩baidu好几条街。万恶的竞价排名!