在頁面數據准備好之前，如何延遲 jQuery Mobile 中的頁面轉換？

Question

我有一個使用 jquery-mobile (jqm) 和淘汰賽構建的移動單頁 Web 應用程序。 應用程序本身有多個頁面，但它們都包含在一個 HTML 文檔中。

問題：將我的“為頁面創建視圖模型”從同步行為更改為異步行為后，我遇到了 jquery-mobile 在數據准備好之前觸發其事件的問題。

背景：直到最近我一直在處理示例數據，基本上是一個巨大的 JSON blob，一切都運行得很順利。 使用來自各種來源的視圖模型的新異步組合，數據不會立即准備好，我的“buildViewModel”方法采用連續回調而不是同步返回數據。

我訂閱了 pagebeforecreate 和 pagebeforechange 事件，並在此處觸發代碼以填充視圖模型。 問題在於，從事件處理程序返回后，jqm 在數據可用之前觸發了剩余的事件鏈。 這導致頁面轉換到未准備好的頁面，這是不希望的。

我曾嘗試在所有事件之前調用event.preventDefault並在頁面准備好進行 a) 增強和 b) 頁面轉換時手動調用 $.mobile.changePage，但沒有任何運氣。

我已經掃描了 jquery-mobile 源，但找不到任何看起來可以讓我延遲pagebeforeshow事件的東西，這基本上是我能夠正確呈現頁面所需要的。

在 jquery-mobile 嘗試增強頁面和執行頁面轉換之前，如何確保 1) 數據可用和 2) 敲除已應用於執行初始 DOM 操作？

我還考慮使用同步 ajax 來獲取資源，但這（我認為）不適用於從設備加載的資源（使用 PhoneGap/Cordova），並且還有其他我想避免的負面影響。

FWIW，我想避免通過在任何地方連接點擊處理程序來手動處理所有導航事件，但如果需要，我對所有解決方案持開放態度。

如果這是重復的，請道歉； 我搜索並閱讀了大量問題，但沒有找到完全相同的答案或問題。 我會是第一個遇到這個問題的人，這聽起來令人難以置信，因為我認為這是一個常見的場景。

更新：澄清了問題場景描述。

Answer 1

我有這個完全相同的問題。

我能想出的唯一解決方案是編寫一個自定義轉換處理程序，將轉換開始推遲到 Ajax 請求完成。

這是展示該技術的小提琴。 小提琴不使用淘汰賽，但確實展示了如何推遲過渡。

基本上，由於$.ajax()返回一個承諾，我可以將它導入默認轉換處理程序返回的承諾，並從我的新處理程序返回它。

在我的 pagebeforeshow 處理程序中，我將 Ajax 承諾附加到頁面，以便轉換處理程序可以訪問它。 不確定這是否是最好的方法，但我比使用全局變量更喜歡它。

我唯一不喜歡這個的地方是它延遲了轉換的開始，直到 Ajax 響應到達，所以它可能感覺頁面已經“掛”給用戶，讓他們再次點擊。 手動顯示加載消息使它感覺更靈敏。

希望這會有所幫助，如果您找到更好的解決方案，請告訴我！

Answer 2

在 jQuery Mobile 中面對動態內容時，延遲到新頁面的轉換直到其內容准備好是一個非常常見的問題。 解決這個問題最方便的方法是：

• 不是經典的 href 類型導航，而是基於“點擊”操作的鏈接，這些操作將首先檢索內容，在 DOM 中構建一個新頁面，然后通過$.mobile.changePage啟動到這個新頁面的$.mobile.changePage 。 這種方式的優點是容易到位，缺點是不用經典的href鏈接導航

• 在文檔級別綁定pagebeforechange事件以檢測導航時目標頁面是否是應包含動態內容的頁面之一。 在這種情況下，您可以防止默認導航發生，花時間生成頁面，並在成功時進行轉換。 這在關於動態注入內容的 JQM 文檔中進行了描述。 優點是您仍然可以依賴標准的href鏈接導航，但它需要更多的代碼和上游設計才能正確檢測頁面導航並采取行動。

   $(document).on( "pagebeforechange", function( e, data ) { if ( typeof data.toPage === "string" ) { if ( data.toPage === "myDynamicPageName" ) { e.preventDefault(); //used to stop transition to the page (for now) /* Here you can make your ajax call In you callback, once you have generated the page you can call $.mobile.changePage (you can pass the Div of the new page instead of its name as the changepage parameter to avoid interrupting again the page change) */ } } });

Answer 3

將鏈接設置為調用“加載”函數而不是進行頁面轉換。 在您的加載函數中，顯示“加載消息”並進行 JSON 調用。 最后，在JSON回調函數中，將page改為page2

負載函數：

function loadPage2() {
    /* show wait page */
    $.mobile.loading( 'show', {
            text: 'Loading massively huge dataset',
            textVisible: true
    });

     /* perform JSON call then call callback */
 }

回調函數

function callback() {
    $.mobile.changePage("#page2");
}

這是一個有效的 JSFiddle： http : //jsfiddle.net/8w7PM/

請注意，如果您不希望用戶在等待時更新第 1 頁中的輸入字段，請在第 1 頁和第 2 頁之間引入“等待頁面”，“等待頁面”的初始化與“loadPage2”相同.

Answer 4

我認為你必須為所有你想要將數據從響應綁定到的小部件再次觸發

例如，你將不得不調用trigger與create或refrest的元素事件$("#element").trigger('create'); JQuery Mobile 會將所有默認事件按原樣綁定到元素

- - 編輯 - -

我剛剛創建了一個示例代碼，我認為這與您的問題相同，請嘗試鏈接http://jsfiddle.net/ndkhoiits/BneqW/embedded/result/

在渲染數據之前，我們必須調用服務來獲取它們進行顯示，這就是為什么所有由 jqm 綁定的事件將被刪除的原因。

我有一個解決方法，不要讓 jqm 在元素上觸發任何東西，我們會在所有數據被knockoutjs 綁定后觸發它讓我們試試固定版本http://jsfiddle.net/ndkhoiits/c5a2b/embedded/result /

這是代碼http://jsfiddle.net/ndkhoiits/c5a2b/

Answer 5

我有一個小型 jQuery Mobile/KnockoutJS 應用程序，並且遇到了同樣的問題。 我的應用程序包含大約 5 頁。 所有這些都包含在一個單獨的物理 HTML 文檔中，使用標准的<div data-role="page">標記分隔各個頁面。

由於$.ajax成功，我終於使用了基於點擊的導航並觸發了$.mobile.changePage() 。

這種技術的缺點之一是，當依賴onclick與href屬性時，您將失去按鈕高亮顯示。 請參閱我的相關帖子： href 與腳本化頁面轉換和按鈕突出顯示

我后來選擇同時提供兩者並依靠href來執行導航，同時使用onclick調用我的 JavaScript 邏輯來加載 ViewModels 等。我發現這是一個問題的唯一地方是在源上可能需要驗證時頁。 如果失敗，則過渡已經開始，然后 UI 會閃回到源頁面。 丑陋，但這僅發生在我的應用程序中的有限實例中。

我認為這些都不是特定於 Knockout 的。 我的確切解決方案可能會為您帶來問題，因為您的導航可能會在您的模型完全加載之前完成，但如果您依賴$.mobile.changePage() ，它應該都可以工作並隱藏您的頁面，直到它加載之后。 過渡應該可以正常工作。

<a href="#MyNewPage" data-bind="click:LoadNewPage" data-role="button">
    Load Page
</a>

$.ajax({
    url: url,
    cache: false,
    dataType: "json",
    data: requestData,
    type: "POST",
    async: true,
    timeout: 10000,
    success: function (data, textStatus, jqXHR) {
        // use either href or changePage but not both
        $.mobile.changePage("#NewPage");
    },
    error: function (jqXHR, textStatus, errorThrown) {
        alert("AJAX Error. Status: " + textStatus);
        // jqXHR.status
        // http://www.w3.org/Protocols/rfc2616/rfc2616-sec10.html
    }
});

Answer 6

您應該將頁面轉換的代碼放在 AJAX 調用的成功函數中。

$.ajax({
    url:"request-url",
    data: data,
    type: "POST",
    success: function(response){
        // Add Transition Code Here
    }  
});