在使用 ko.mapping.fromJS 进行异步 ajax 调用后更新可观察到的淘汰赛答案

【问题标题】：Updating a knockout observable after an async ajax call using ko.mapping.fromJS在使用 ko.mapping.fromJS 进行异步 ajax 调用后更新可观察到的淘汰赛
【发布时间】：2015-02-26 03:44:45
【问题描述】：

我有一个简单的用例。我需要异步调用 WS 并在 UI 上显示返回的 JSON。我得到的 JSON 是一个具有多个属性的对象。为简单起见，下面的代码只有一个属性。由于我有多个属性，我使用 ko.mapping.fromJS 将 JSON 映射到对象属性。一切似乎都有效，只是获取的数据没有在 UI 上更新。如果我手动更新 observable，它就可以工作。但在使用 ko.mapping.fromJS 时不会。

Javascript

function AppViewModel() {
var self = this;
self.firstName = ko.observable("Bert");

$.ajax({
    dataType: 'json',
    async: true,
    type: 'POST',
    url: '/echo/json/',
    data: {
        json: '{"firstName":"Bob1"}'
    }
}).done(function(data) {
    console.log(data);

    //self.firstName(data.firstName);//This works
    self = ko.mapping.fromJS(data); //This doesn't

    console.log(self.firstName());
}).fail(function(jqxhr, textStatus, error) {
    alert('there was an error');
});
}

// Activates knockout.js
var avm = new AppViewModel();
ko.applyBindings(avm);

HTML

<p>First name: <strong data-bind="text: firstName"></strong></p>

您可以运行 jsfiddle。你会看到这条线有效

self.firstName(data.firstName);//This works

这行不行

self = ko.mapping.fromJS(data); //This doesn't

http://jsfiddle.net/texag93/fakdf5Lw/53/

【问题讨论】：

标签： javascript ajax json knockout.js knockout-mapping-plugin

【解决方案1】：

两件事：1) 您需要使用 ko.mapping.fromJS 创建初始视图模型，以及 2) 您需要在更新现有视图模型时将其作为第二个参数传递给 fromJS。

所以改为这样：

// Activates knockout.js
var avm = ko.mapping.fromJS({firstName: 'Bert'});
ko.applyBindings(avm);

$.ajax({
    dataType: 'json',
    async: true,
    type: 'POST',
    url: '/echo/json/',
    data: {
        json: '{"firstName":"Bob1"}'
    }
}).done(function(data) {
    console.log(data);

    ko.mapping.fromJS(data, avm);

    console.log(avm.firstName());
}).fail(function(jqxhr, textStatus, error) {
    alert('there was an error');
});

更新小提琴：http://jsfiddle.net/fakdf5Lw/56/

【讨论】：