3

我正在使用 PhoneGap + jQueryMobile + Mustache JS 为移动设备创建应用程序。

为了确保应用程序具有响应性并且在离线模式下也能正常工作，我将 Html、图像、CSS 和 JS 文件打包到应用程序中。但是，应用程序需要与远程服务器交互并根据其 JSON 响应动态呈现网页。

实际上，html 资产具有 Mustache 标记，并且远程 JSON 响应被馈送到 Mustache JS 以替换标记。

所以，我的想法是倾听pagebeforeload并使用event.preventDefault()来阻止 jQM 执行任务本身。以下是代码：-

function pageLoader(event, pdata) {

    if ($(window).data(pdata.dataUrl + '-suppress')) {  // <---- UGLY HACK to prevent this from getting called the 2nd time.
        $(window).removeData(pdata.dataUrl + '-suppress');
        return;
    }

    event.preventDefault();

    $.getJSON(
            'http://myserver/json',
            {
                src : pdata.dataUrl
            },
            function(data, textStatus, jqXHR) {

                if (data.success) {
                    $(window).data(pdata.dataUrl + '-suppress', true);

                    $.mobile.loadPage(pdata.absUrl, pdata.options).done(
                            function(url, options, newPage, dupCachedPage) {
                                newPage.html(Mustache.render(
                                        newPage.html(), data.view));

                                pdata.deferred.resolve(url, options,
                                        newPage, dupCachedPage);
                            }).fail(function(url, options) {
                        pdata.deferred.reject(url, options);
                    });

                } else {
                    pdata.deferred.reject(pdata.dataUrl, pdata.options);
                }

            }).fail(function() {
        pdata.deferred.reject(pdata.dataUrl, pdata.options);
    });
}

上面的代码做了什么

上面的代码阻止了默认的页面加载操作。然后它发出一个 JSON 请求。当响应到来时，它会用于$.mobile.loadPage加载实际的 html 页面。之后，它将 JSON 响应 + html 传递给 Mustache 以获得最终的 html，该 html 再次插入到 DOM 中。最后它调用延迟对象让 jQM 知道我们已经完成了页面的加载。

上述方法中的问题我想解决

  1. 当索引页面呈现时，不会调用此方法，因此页面呈现时没有 Mustache。在我完成加载 JSON 并重新渲染 html 之前，我看不到任何方法可以让 jQM 继续显示加载消息。
  2. loadPage当我手动调用它时，我正在使用一个丑陋的黑客来防止我的事件侦听器再次被调用。我正在使用loadPage而不是$.ajax()因为该方法提供了更多功能，例如仅部分解析页面的data-role="page"一部分并仅在其中执行脚本。如果将该方法公开为辅助函数，那就太好了。
4

1 回答 1

1

您需要的是 .ajaxSend() 侦听器。它将为每个 Ajax 调用填充一个全局事件侦听器 - 就像您的 getJSON。

$(document).ajaxSend(function () {
    $.mobile.loading("show")
}).ajaxStop(function () {
    $.mobile.loading("hide")
});
于 2016-04-22T13:23:30.437 回答