jQuery Mobile Page刷新机制

Question

我目前很难理解JQuery mobile在ajax更新后如何处理页面刷新.

我有两页 - 独特的文件站点:搜索引擎.

第一页是搜索字段.提交触发JSON调用和解析器,更新第二页:结果.

现在我正在使用:$.mobile.changePage( $('#result') );从搜索字段到结果页面的工作很棒.但是:如果我在结果页面中为next/prev页面重新使用它(新的json调用,新的解析,DOM中新添加的节点); Jquery Mobile不会"绘制"新添加的节点.

任何人都可以解释,请1- $.mobile.page() 2- $.mobile.changePage() 3- 的使用和区别$.mobile.refresh()

或者给我一个关于如何处理页面更改的提示.谢谢!

Answer 1

function refreshPage()
{
    jQuery.mobile.changePage(window.location.href, {
        allowSamePageTransition: true,
        transition: 'none',
        reloadPage: true
    });
}

从这里开始http://scottwb.com/blog/2012/06/29/reload-the-same-page-without-blinking-on-jquery-mobile/也在jQuery Mobile 1.2.0上测试过

Answer 2

请仔细看看:http://jquerymobile.com/test/docs/api/methods.html

$.mobile.changePage()是从一个页面更改为另一个页面,参数可以是url或页面对象.(只有#result也可以)

$.mobile.page()不推荐了,请使用.trigger( "create"),另请参阅:JQuery Mobile .page()函数导致无限循环？

重要:创建与刷新:一个重要的区别

请注意,某些小部件具有的create event和refresh方法之间存在重要差异.create事件适用于增强包含一个或多个小部件的原始标记.某些小部件具有的刷新方法应该用于已经以编程方式操作的现有(已经增强的)小部件,并且需要更新UI以匹配.

例如,如果您有一个页面,您在页面创建后动态添加了一个带有data-role = listview属性的新的无序列表,则在该列表的父元素上触发create会将其转换为listview样式的小部件.如果以编程方式添加更多列表项,则调用listview的refresh方法会将这些新列表项更新为增强状态,并保持现有列表项不变.

$.mobile.refresh() 我猜不存在

那你用什么来取得结果呢？列表视图？然后你可以通过这样做来更新它:

$('ul').listview('refresh');

示例:http: //operationmobile.com/dont-forget-to-call-refresh-when-adding-items-to-your-jquery-mobile-list/

否则你可以这样做:

$('#result').live("pageinit", function(){ // or pageshow
    // your dom manipulations here
});

Answer 3

我在jQuery论坛上发布了这个帖子(我希望它可以提供帮助):

深入了解jQM代码我发现了这个解决方案.我希望它可以帮助其他人:

要刷新动态修改的页面:

function refreshPage(page){
    // Page refresh
    page.trigger('pagecreate');
    page.listview('refresh');
}

即使您创建新的标题,导航栏或页脚,它也能正常工作.我用jQM 1.0.1测试了它.