$ .getJSON无法传递到knockout observableArray

时间:2013-04-16 19:29:10

标签: javascript json knockout.js

我正在试图召唤一个返回Json的Api。我试图将这些返回的数据放入一个可淘汰的可观察数组中。我的视图模型如下所示:

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

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

ko.applyBindings(viewModel);

请求通过并返回一个对象,其中包含adminData中的预期数据,但是当我尝试将其添加到ko.observableArray时,我在控制台中得到了这个:初始化可观察数组时传递的参数必须是数组。我无法弄清楚如何将数据转换为数组以进行淘汰赛。

3 个答案:

答案 0 :(得分:9)

异步中的

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

答案 1 :(得分:1)

因为getJSON()是异步的!您不能将其视为同步方法。看看console.log行是什么,它会显示失败的原因。

使用回调

$.getJSON("/api/administrators", function(adminData) {

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

    ko.applyBindings(viewModel);
}

答案 2 :(得分:0)

在你的$ .getJSON回调中,只需更新你的observable数组,然后在该数组上调用valueHasMutated(),如:administrators.valueHasMutated()