jQuery Mobile - 加载外部 HTML

Question

我正在将一些外部 html 加载到 jquery 移动应用程序的 div 中。一切正常，但我试图让它更平滑一点。

这是我的代码：

$(document).bind('pagebeforecreate', function (event, ui) {
    if (event.target.id == 'pageViewOrder') {
        //get the page
        $.getJSON(root_url + '/orders/view/' + window.viewOrderReference + '/?callback=?', null, function (d) {
            $("#viewOrder_content").html(d.html).trigger("create");
            $.mobile.loading('hide');
        });
    }

发生的情况是页面在 ajax 调用完成之前显示。有没有办法在此调用完成之前停止 jquery mobile 继续显示页面？在它显示页面的那一刻，内容就会弹出。

编辑：这是在单页中加载

干杯， 本

Answer 1

暂停显示过程很简单，您只需致电event.preventDefault()。 然后，问题是确保您在检索内容后将继续执行该过程。我实际上要做的是绑定到pagechange，检查您是否已经检索到数据，如果没有，则中断该过程，检索数据并重新开始。如果是，则按计划进行。

var contentRetrieved = false; //will indicate wether the JSON call has already been executed
var contentToDisplay; //data from the JSON call

$(document).live('pagebeforechange', function (event, data) {
    if (( typeof data.toPage === "string" ) && ($.mobile.path.parseUrl(data.toPage).hash == '#pageViewOrder')) {
        if (contentRetrieved) {
           contentRetrieved = false; //content is already retrieved, we proceed with the pagechange
        } else {
           event.preventDefault(); //prevent further page change operations
           $.getJSON(root_url + '/orders/view/' + window.viewOrderReference + '/?callback=?', null, function (d) {
                contentToDisplay = {"html":d.html};
                contentRetrieved = true;
                $.mobile.changePage("#pageViewOrder");
            });
        }
    }
});


$(document).bind('pagebeforecreate', function (event, ui) {
    if (event.target.id == 'pageViewOrder') {
        $("#viewOrder_content").html(contentToDisplay.html).trigger("create");
        $.mobile.loading('hide');
    }
});​