同步查看/數據加載

Question

我要執行2 AJAX調用：

1. 加載HTML局部模板。
2. 加載模板的JSON數據並將其渲染到加載的模板中。

JSON應該與模板分開加載，因爲用戶可以觸發某種「刷新」操作。無法在第一次加載頁面時加載模板，因爲頁面上存在選項卡控件，並且每個選項卡都應該「按需」加載。

所以我們假設一些function loadData被調用。所以，我需要做到以下幾點：

1. 如果模板已經加載，然後轉到步驟3
2. 發送AJAX使用$.getJSON同時使用$().load和AJAX的JSON數據模板。事實是，我們可以將它們都發送到一起而無需等待模板加載，對嗎？
3. 如果JSON被加載，然後檢查模板是否已經在這裏。如果是，則將數據呈現到模板中。否則等待模板被加載，然後渲染數據成功。

所以我想知道這種活動的最佳做法是什麼？有沒有完整的解決方案？

預先感謝您。

Answer 1

是的。您可以使用jQuery Deferreds（http://api.jquery.com/category/deferred-object/）來協調所有這些。

JS代碼：

var templatePromise = null; 

function loadData() { 
    if (!templatePromise) { 
     templatePromise = $.get('templateUrl'); 
    } 

    var dataPromise = $.getJSON('dataUrl'); 

    $.when(templatePromise, dataPromise) 
     .done(function (template, data) { 

      // you have both template and data. 

     }) 
     .fail(function() { 
      // either the template or the data failed to be fetched properly. 
     }); 
}