如何在jQuery Mobile中延迟页面转换,直到页面数据准备就绪?

问题描述 投票:20回答:6

我有一个使用jquery-mobile(jqm)和剔除构建的移动单页Web应用程序。该应用程序本身具有多个页面,但它们都包含在一个HTML文档中。

问题:将我的“为页面创建视图模型”从同步行为更改为异步行为后,我遇到的问题是jquery-mobile在数据准备就绪之前会触发其事件。

背景:直到最近,我一直在使用示例数据,基本上是一个巨大的JSON blob,并且一切工作都非常顺利。使用来自各种来源的新的异步视图模型组合,数据无法立即准备就绪,而我的“ buildViewModel”方法采用了连续回调,而不仅仅是同步返回数据。

我正在订阅pag​​ebeforecreate和pagebeforechange事件,并触发代码以在此处填充viewmodel。问题在于,从事件处理程序返回后,jqm会在数据可用之前触发剩余的事件链。这会导致页面过渡到未准备的页面,这是不希望的。

我已经尝试在所有事前事件中调用event.preventDefault,并在页面准备好进行a)增强和b)进行页面转换但没有运气的情况下手动调用$ .mobile.changePage。] >

我已经扫描了jquery-mobile源,但是找不到任何可以让我延迟pagebeforeshow事件的东西,这实际上是我能够正确呈现页面所需要的。

如何确保在jquery-mobile尝试增强页面之前以及在执行页面的过渡之前,已使用1)数据和2)敲除来执行初始DOM操作?

我还考虑过使用同步ajax来获取资源,但是(我认为)这对于从设备(使用PhoneGap / Cordova)从设备加载的资源不起作用,还有其他一些我要避免的负面影响。

FWIW,我希望避免通过在各处连接单击处理程序来手动处理所有导航事件,但如有需要,我欢迎所有解决方案。

很抱歉,如果这是重复的;我搜索并阅读了大量问题,但没有找到完全相同的答案或问题。听起来令人难以置信,我将是第一个遇到此问题的人,因为我认为这是一个常见的情况。

更新:已阐明问题场景的描述。

我有一个使用jquery-mobile(jqm)和剔除构建的移动单页Web应用程序。该应用程序本身具有多个页面,但它们都包含在一个HTML文档中。 ...

javascript jquery-mobile knockout.js
6个回答
13
投票

我也有同样的问题。

我唯一能想到的解决方案是编写一个custom transition handler,以延迟开始转换,直到Ajax请求完成。


5
投票

在面对jQuery Mobile中的动态内容时,将过渡过渡到新页面直到其内容准备好是一个非常普遍的问题。解决此问题的最便捷方法是:


3
投票

将您的链接设置为调用“加载”功能,而不是进行页面转换。在加载功能中,显示“加载消息”并进行JSON调用。最后,在JSON回调函数中,将page


0
投票

[我认为您必须为要绑定响应数据的所有小部件再次触发


0
投票

我有一个小型jQuery Mobile / KnockoutJS应用程序,并且一直在遇到同样的问题。我的应用包含约5页。所有内容都包含在单个物理HTML文档中,并带有标准<div data-role="page">标记,将各个页面分开。


-2
投票

您应该将页面转换的代码放在AJAX调用的成功函数中。

© www.soinside.com 2019 - 2024. All rights reserved.