Javascript 使用ko.mapping.fromJS在异步ajax调用后更新可观察到的敲除

我有一个简单的用例。我需要异步调用WS，并在UI上显示返回的JSON。我得到的JSON是一个具有多个属性的对象。为简单起见，下面的代码只有一个属性。因为我有多个属性，所以我使用ko.mapping.fromJS将JSON映射到对象属性。这一切似乎都很有效，只是提取的数据没有在UI上更新。如果我手动更新可观察对象，它就会工作。但在使用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>

这条线不行

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

两件事：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');
});

更新小提琴：

// 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');
});