javascript - 如何在 jQuery Mobile 中延迟页面转换，直到页面数据准备好？

Question

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

问题:在将我的“为页面创建 View 模型”从同步行为更改为异步行为之后，我遇到了 jquery-mobile 在数据准备好之前触发其事件的问题。

背景:直到最近，我一直在处理示例数据，基本上是一个巨大的 JSON blob，一切都很顺利。使用来自各种来源的 View 模型的新异步组合，数据不会立即准备好，我的“buildViewModel”方法需要一个延续回调，而不是仅仅同步返回数据。

我正在订阅 pagebeforecreate 和 pagebeforechange 事件，并触发代码以在此处填充 View 模型。问题是，从事件处理程序返回后，jqm 在数据可用之前触发剩余的事件链。这会导致页面转换到未准备好的页面，这是不希望的。

我曾尝试调用event.preventDefault在所有之前的事件中并在页面准备好后手动调用 $.mobile.changePage a) 增强和 b) 页面转换发生，但没有任何运气。

我已经扫描了 jquery-mobile 源，但没有发现任何看起来可以让我延迟 pagebeforeshow 的东西。事件，这本质上是我能够正确呈现页面所需要的。

在 jquery-mobile 尝试增强页面之前以及在执行到页面的过渡之前，如何确保 1) 数据可用和 2) 已应用 knockout 以执行初始 DOM 操作？

我还考虑过使用同步 ajax 来获取资源，但这(我认为)不适用于从设备加载的资源(使用 PhoneGap/Cordova)，并且会产生其他我想避免的负面后果。

FWIW，我想避免通过在各处连接点击处理程序来手动处理所有导航事件，但如果需要，我对所有解决方案持开放态度。

抱歉，如果这是重复的；我搜索并阅读了大量问题，但没有找到完全相同的答案或问题。我会是第一个遇到这个问题的人，这听起来令人难以置信，因为我想这是一个常见的场景。

更新:澄清问题场景描述。

Answer 1

我有这个完全相同的问题。

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

这是 fiddle显示技术。 fiddle 不使用 knockout ，但确实展示了如何推迟过渡。

基本上，因为 $.ajax()返回一个promise，我可以将它传递到默认转换处理程序返回的promise中，并从我的新处理程序中返回它。

在我的 pagebeforeshow 处理程序中，我将 Ajax promise 附加到页面，以便转换处理程序可以访问它。不确定这是否是最好的方法，但我比使用全局变量更喜欢它。

我唯一不喜欢的是它延迟了转换的开始，直到 Ajax 响应到达，所以感觉页面已经“挂起”给用户，让他们再次点击。手动显示加载消息会让人感觉更灵敏一些。

希望这会有所帮助，如果您找到更好的解决方案，请告诉我!