jQuery Mobile 页面刷新机制

Question

我很难理解 jQuery Mobile 如何在 ajax 更新后处理页面刷新。

我有一个两页的独特文件网站：一个搜索引擎。

第一页是搜索字段。提交会触发 JSON 调用和解析器，从而更新第二页：结果。

现在我正在使用： $.mobile.changePage( $('#result') ); 它可以很好地完成从搜索字段到结果页面的工作。 然而： 如果我在下一个/上一个页面的结果页面中重用它（新的 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，也可以是page对象。 （只有 #result 也可以）

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

重要提示：
创建与刷新：重要区别

请注意，某些小部件的创建事件和刷新方法之间存在重要区别。 create 事件适合增强包含一个或多个小部件的原始标记。某些小部件具有的刷新方法应该用于已通过编程方式操作并需要更新 UI 来匹配的现有（已增强）小部件。

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

我猜 $.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 对其进行了测试。

Answer 4

我发现这个线程希望使用 jQuery Mobile 创建 ajax 页面刷新按钮。

@sgissinger 有最接近我正在寻找的答案，但它已经过时了。

我更新了 jQuery Mobile 1.4

function refreshPage() {
  jQuery.mobile.pageContainer.pagecontainer('change', window.location.href, {
    allowSamePageTransition: true,
    transition: 'none',
    reloadPage: true 
    // 'reload' parameter not working yet: //github.com/jquery/jquery-mobile/issues/7406
  });
}

// Run it with .on
$(document).on( "click", '#refresh', function() {
  refreshPage();
});

Answer 5

我通过在我想要刷新的页面上的页面 div 中使用 data-cache="false" 属性解决了这个问题。

<div data-role="page" data-cache="false">
/*content goes here*/

</div>

就我而言，这是我的购物车。如果客户将一件商品添加到购物车，然后继续购物，然后将另一件商品添加到购物车，则购物车页面将不会显示新商品。除非他们刷新页面。据我所知，将 data-cache 设置为 false 指示 JQM 不要缓存该页面。

希望这对将来的其他人有帮助。

Answer 6

这个答案对我有用 http:// view.jquerymobile.com/master/demos/faq/injected-content-is-not-enhanced.php。

在多页面模板的上下文中，我修改了 Javascript 'pagebeforeshow' 处理程序和触发器中

...

的内容脚本末尾刷新：

$(document).bind("pagebeforeshow", function(event,pdata) {
  var parsedUrl = $.mobile.path.parseUrl( location.href );
  switch ( parsedUrl.hash ) {
    case "#p_02":
      ... some modifications of the content of the <div> here ...
      $("#foo").trigger("create");
    break;
  }
});