아약스와의 약속

Question

지금 당장은이 코드를 가지고 있는데, 페이지에 필요한 모든 템플릿을 얻을 수 있습니다.

문제는 이런 식으로 페이지를로드 할 때마다 동일한 순서로 아약스 요청이 완료되지 않는다는 것입니다.

로드 순서가 항상 동일하게 유지되도록 약속 또는 다른 것을 사용하는 방법이 있습니까?
감사합니다.

var loadTemplates = function (templatesObject) { 
    $.each(templatesObject.template, function (index, template) { 
     template.callback = template.callback || $.noop; 

     $.ajax({ 
      url: template.url, 
      success: function(html) { 
       var compiledHtml = Handlebars.compile(html); 
       var output = compiledHtml(template.data); 
       $(template.target).append(output); 
       template.callback(); 
      } 
     }); 
    }); 
}; 

편집 :이 템플릿은 다양한 양의 템플릿을 사용하여 내 개체가 어떻게 생겼는지 보여줍니다.

당신은 약속을 반환 아약스 $가 대신 $ .each의 $ .MAP을 사용하고 완료하는 모든 아약스 기다릴 $ .when를 사용한다는 사실을 사용할 수

var templates = { 
    template: [ 
     { 
      url: 'firsturl', 
      target: '#page-content' 
     }, 
     { 
      url: 'myurl', 
      target: '#page-content', 
      data: data, 
      callback: awesomefunction 
     } 
    ] 
}; 

Answer 1

templatesObject $ .when() 콜백에서 성공 콜백에서 무엇을 할 수 있습니까?

var loadTemplates = function (templatesObject) { 
    $.when.apply($, $.map(templatesObject.template, function (index, template) { 
     template.callback = template.callback || $.noop; 
     return $.ajax({ 
      url: template.url, 
     }).then(function(html) { 
      return {html: html, template: template}; 
     }); 
    })).then(function() { 
     $.each(arguments, function(index, result) { 
      var compiledHtml = Handlebars.compile(result.html); 
      var output = compiledHtml(result.template.data); 
      $(result.template.target).append(output); 
      result.template.callback(); 
     }) 
    }); 
};