javascript - $.getJSON 无法传递到 knockout observableArray 中

Question

我正在尝试调用返回 Json 的 Api。我试图将返回的数据放入 knockout 可观察数组中。我的 View 模型如下所示:

var adminData = $.getJSON("/api/administrators");
//console.log(adminData);

var viewModel = {
    administrators: ko.observableArray(adminData)
};

ko.applyBindings(viewModel);

请求通过，并返回一个对象，其中包含 adminData 中的预期数据，但是当我尝试将其添加到 ko.observableArray 时，我在控制台中看到:初始化可观察数组时传递的参数必须是数组。我不知道如何将这些数据放入数组中进行 knockout 。

Answer 1

$.getJSON在异步中。结果数据仅在回调中可用。它不能作为 $.getJSON 的返回值使用。文档从未提及返回值。

$.getJSON("/api/administrators", null, function(adminData, status, xhr){
    var viewModel = {
        administrators: ko.observableArray(adminData)
    };  
    ko.applyBindings(viewModel); 
});

如果您需要进行单独的 AJAX 调用，您应该使用 jQuery.when请参阅Wait until all jQuery Ajax requests are done?

$.when($.ajax("/api/administrators"), $.ajax("api/roles")).done(function(resp1, resp2){        
    ko.applyBindings({
        administrators: ko.observableArray(resp1[0]),
        roles: ko.observableArray(resp2[0]);
    }); 
});

这里还有一些不太理想的解决方案，但它向您展示了幕后发生的情况。

如果您不介意请求相互等待

$.getJSON("/api/administrators", null, function(adminData){
    $.getJSON("/api/administrators", null, function(apiRoles){
        ko.applyBindings({
            administrators: ko.observableArray(adminData),
            roles: ko.observableArray(apiRoles);
        }); 
    });
});

如果您确实关心，那么情况会更复杂，因为您需要跟踪请求是否已完成

var ajaxAdminData, ajaxApiRoles
$.getJSON("/api/administrators", null, function(adminData, status, xhr){
    var ajaxAdminData = adminData;
    // If the other call finished, apply the bindings
    if (ajaxApiRoles) {
        applyBindings();
    }
});

$.getJSON("/api/administrators", null, function(apiRoles, status, xhr){
    ajaxApiRoles = apiRoles;
    // If the other call finished, apply the bindings
    if (ajaxAdminData) {
        applyBindings();
    }
});

function applyBindings() {
    ko.applyBindings({
        administrators: ko.observableArray(ajaxAdminData),
        roles: ko.observableArray(ajaxApiRoles);
    }); 
}