Knockout observable 在函数内部显示不同的信息答案

【问题标题】：Knockout observable is displaying different information inside a functionKnockout observable 在函数内部显示不同的信息
【发布时间】：2015-12-13 17:25:15
【问题描述】：

我有一个 jQuery JSON 函数，它提取一个 JSON 文件，使用 Knockout 映射对其进行映射，然后将其应用到一个可观察数组：

self.emails = ko.observableArray([]);
$.getJSON("emails.json", function(data) { 
    var emails = ko.mapping.fromJS(data);
    self.emails(emails());
});

我遇到的问题是，如果我 alertgetJSON 函数中的 self.emails()，它会显示里面的所有对象，但是如果我 alertgetJSON 之外的 self.emails()函数，它是空的。

我对 Knockout 有点陌生，但据我了解，由于我将它们设置为可观察对象，因此它们应该在函数内外保持相同的值，因为它们应用于 self 变量。

我在这里做错了什么或遗漏了什么吗？

【问题讨论】：

您确定在getJSON 完成后外面的警报会触发吗？
我在所有绑定函数之后将警报放在函数的最后，所以我认为它会在那时完成，但即使我在函数外部同时提醒 observable 它还是空的。
我相信你是对的，我认为它只是在处理绑定之前触发警报。

标签： knockout.js

【解决方案1】：

alert 在$.getJSON() 的回调中起作用的原因是，jQuery 函数是异步的，一旦它触发对服务器的请求，就会运行下一行 JavaScript 并映射结果电子邮件不完整，您的self.emails() 为空。

您使用的$.getJSON() 语法：

$.getJSON("emails.json", function(data) { 
    var emails = ko.mapping.fromJS(data);
    self.emails(emails());
});

function(data) {是$.getJSON()函数的成功回调，所以会在AJAX请求完成时执行。

使用 promise/deferred 语法可能会更清楚，这样您就可以处理成功 (.done())、失败 (.fail()) 和完成 (.always()) 的 AJAX 请求。

下面是一个示例，说明如何使用您的代码做到这一点：

$.getJSON("emails.json")
    .done(function(data) {
        var emails = ko.mapping.fromJS(data);
        self.emails(emails());
        alert(self.emails());
    })
    .fail(function() {
        // Something bad happened

    })
    .always(function() {
        // No matter success or failure do something here
        // Typically I have used this to stop a busy wait icon or animation
        // so the user knows that the server-side processing is over

    });

【讨论】：