약속의 올바른 사용

Question

나는 나의 ajax 호출만을 포함하는 별도의 타이프 스크립트 파일을 가지고있다.

는 내가 마지막으로 내가 녹아웃 객체를 호출 한 후 드롭 다운에 데이터를 바인딩하는 전망을 관찰 배열

에게 녹아웃을로드하기 위해 사용하고 두 번째 타이프 스크립트 파일이 있습니다.

이 내 아약스 데이터를 내 수업에서 호출

export class ILRDataService { 
    public dataServiceOptions: DataServiceOptions; 
    public getPeriodsForCandidate() { 
     var urlToUse = this.dataServiceOptions.baseUrl + 'ilrdata/' + 
      this.dataServiceOptions.periodIdentifier + 
      '/AcademicPeriods/' + this.dataServiceOptions.candidateIdentifier; 
     return $.ajax({ 
      url: urlToUse 
     }); 
    } 
} 

이

를 호출합니다. 이것은 getPeriodsForCandidate 방법을 내가

var academicPeriodsViewModel = new Ilr.AcademicPeriod(dataServiceOptions); 
$.when(academicPeriodsViewModel.LoadPeriodsForCandidate()) 
    .then(function() { 
     ko.applyBindings(academicPeriodsViewModel, document.getElementById("AcademicPeriods")); 
}); 

내 문제가 AcademicPeriod 기간의 LoadPeriodsForCandidate 방법에서, 함수가 바로 다음 코드를 반환되어 있습니다 내보기에 마지막으로

export class AcademicPeriod { 
    private dataServiceOptions: DataServiceOptions; 
    public LoadPeriodsForCandidate() { 
     var self = this; 
     var dataService = new Ilr.ILRDataService(self.dataServiceOptions); 
     return dataService.getPeriodsForCandidate() 
      .done(function (academicPeriods) { 
       $.each(academicPeriods, function (index, element) { 
        self.Items.push(element); 
        console.log(element); 
       }); 
      }); 
    } 
} 

그리고를 호출하는 방법 $ .each를 처리 한 후가 아니라 Internet Explorer에서 바인드가 실패하게됩니다.

바인딩이 항상 실패하지 않습니다. F12 개발자 도구가 열려 있으면 바인딩이 작동합니다. 그러나 F12 dev 도구 창이 닫히면 바인딩이 자주 실패합니다. 나는 콘솔을보기 위해 F12 윈도우를 열어야하기 때문에 실패 메시지를 볼 수 없다. 그리고 그 순간, 모든 것이 작동한다.

위의 코드를 Chrome 또는 Firefox에서 사용하는 데 문제가 없습니다.

나는 시험, 그리고 한 나는 새로운 콜백 함수를 작성하고 다음과 같은 내 코드를 변경하는 경우 :

public LoadPeriodsForCandidate(callbackFunction) { 
    var self = this; 
    var dataService = new Ilr.ILRDataService(self.dataServiceOptions); 
    dataService.getPeriodsForCandidate() 
     .done(function (academicPeriods) { 
      $.each(academicPeriods, function (index, element) { 
       self.Items.push(element); 
      }); 
      callbackFunction(); 
     }); 
    } 

다음에 내보기에 코드를 변경 : 다음

academicPeriodsViewModel.LoadPeriodsForCandidate(bindAcademicPeriods); 
function bindAcademicPeriods() { 
    ko.applyBindings(academicPeriodsViewModel, document.getElementById("AcademicPeriods")); 
} 

모든 것은 IE에서 작동합니다

그러나 이것은 내가 생각할 수있는 것이고, 어떻게 성공적으로 수행 할 수 있도록 LoadPeriodsForCandidate 메서드를 변경해야하는지 알기를 원합니다. $ .when(). then()을 올바르게 사용하십시오.

Answer 1

.done() 대신 .then()을 호출해야합니다.

호출 .then()은 콜백 (및 반환되는 약속)이 완료 될 때까지 대기하는 새로운 약속을 반환합니다.

$.when()에 전화 할 필요가 없습니다.