正确使用承诺

Question

我有一个单独的打字稿文件，我使用它只包含我的 ajax 调用。

我有第二个打字稿文件，我用它来加载敲除可观察数组

最后我有一个视图，它调用敲除对象，然后尝试将数据绑定到下拉列表。

这是我的 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方法的方法

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);
                });
            });
    }
}

最后在我看来，我有以下代码

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

我的问题是在 AcademicPeriod 期间的 LoadPeriodsForCandidate 方法中，该函数立即返回，而不是在处理 $.each 之后，并导致 Internet Explorer 中的绑定失败。

绑定不会每次都失败。如果我打开了 F12 开发人员工具，则绑定有效。但是如果关闭 F12 开发工具窗口，则绑定经常失败。我看不到失败消息，因为我需要打开 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

您需要在函数中调用.then() 而不是.done()。

调用.then() 将返回一个新的承诺，等待回调（以及它返回的任何承诺）完成。

请注意，您无需致电$.when()。