3

PhoneGap + jQueryMobile + Mustache JS を使用して、モバイル デバイス用のアプリを作成しています。

アプリが応答性が高く、オフライン モードでも最小限の動作をすることを確認するために、Html、画像、CSS、および JS ファイルをアプリにパッケージ化しています。ただし、アプリはリモート サーバーとやり取りする必要があり、その JSON 応答に基づいて Web ページを動的にレンダリングします。

実際には、html アセットには Mustache マークアップがあり、リモートの JSON 応答が Mustache JS に送られ、マークアップが置き換えられます。

それで、私が考えたのは、 jQMがタスク自体を実行するのを止めて、リッスンしpagebeforeloadて使用することでした。event.preventDefault()以下はコードです： -

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 を取得し、これを再び DOM に挿入します。最後に、遅延オブジェクトを呼び出して、ページの読み込みが完了したことを jQM に知らせます。

修正したい上記のアプローチの問題

  1. インデックス ページがレンダリングされるとき、このメソッドは呼び出されないため、ページは Mustache なしでレンダリングされます。JSONの読み込みとhtmlの再レンダリングが完了するまで、jQMに読み込みメッセージを表示し続ける方法がわかりません。
  2. 私は醜いハックを使用して、loadPage手動でイベントリスナーを呼び出すときに、イベントリスナーが再び呼び出されないようにしています。そのメソッドは、ページの一部のみを部分的に解析し、その中でのみスクリプトを実行するなどのより多くの機能を提供するため、loadPage代わりに使用しています。そのメソッドがヘルパー関数として公開されていればよかったのに。$.ajax()data-role="page"
4

1 に答える 1

1

必要なのは .ajaxSend() リスナーです。getJSON のように、すべての Ajax 呼び出しに対してグローバル イベント リスナーを生成します。

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