加载敲除 observableArray 不工作答案

【问题标题】：Load Knockout observableArray not working加载敲除 observableArray 不工作
【发布时间】：2014-03-19 10:18:42
【问题描述】：

尝试像这样从服务器加载带有 json 的 observableArray：

function InsightViewModel() {
    var self = this;
    self.Name = ko.observable("");

    var insightData = {
        Name: self.Name
    };

    self.insightData = ko.observable();
    self.Insights = ko.observableArray([]);

    $.ajax({
        type: "GET",
        url: '@Url.Action("GetIndexData", "Admin")',
        contentType: "application/json",
        dataType: "json",
        data:{},
        success: function (data) {
            self.Insights(data);
            alert(JSON.stringify(data) + "Array length " + self.Insights.length);
        },
        error: function (error) {
            alert(error.status + " " + error.statusText);
        }
    });
};

var viewModel = new InsightViewModel();
ko.applyBindings(viewModel);
alert(viewModel.Insights.length);

我可以从服务器发出 json，它是有效的。但是数组是空的。

我试过了，没有运气：

$(data).each(function (element) {
   self.Insights.push(element);
});

没有淘汰赛的经验。有什么想法吗？

【问题讨论】：

alert(viewModel.Insights.length); 可能在您的 $.ajax.sucess 回调调用之前运行。如果您尝试ko.dataFor(document.body).Insights().length 会怎样？
你错误地得到了长度Insights数组，它应该是self.Insights().length（带括号）。
你说得对，亚历山大，我的错……
您不需要在 Ajax 调用中设置 contentType 和 dataType。服务器通过发送正确的响应头来做到这一点，jQuery 会自动接收它。把它关掉吧。
@Alexander 您能创建一个答案，以便我接受吗？

标签： jquery json asp.net-mvc-4 knockout.js

【解决方案1】：

你错误地获取了长度Insights observableArray，应该是这样的：

self.Insights().length // with brackets

另一个问题，如@haim770 所述，在ko.applyBindings(viewModel) 之后调用alert。很有可能，ajax 请求还没有完成。

【讨论】：

【解决方案2】：

数组为空的原因是因为默认ajax是异步的。解决方法是在您的 ajax 调用中添加 async: false ，但这不是最佳实践。而不是添加 async : false 使用 .done...

function InsightViewModel() {
     var self = this;
     self.Name = ko.observable("");

    var insightData = {
        Name: self.Name
    };

    self.insightData = ko.observable();
    self.Insights = ko.observableArray([]);

    $.ajax({
        type: "GET",
        url: '@Url.Action("GetIndexData", "Admin")',
        contentType: "application/json",
        dataType: "json"            
    })
    .done(function(data)
    {
        self.Insights(data);
    });
 };

var viewModel = new InsightViewModel();
ko.applyBindings(viewModel);
alert(viewModel.Insights.length());

希望这项工作......

【讨论】：