Обновление нокаута наблюдаемого после асинхронного вызова ajax с использованием ko.mapping.fromJS

Question

У меня простой пример использования. Мне нужно асинхронно вызывать WS и показывать возвращенный JSON в пользовательском интерфейсе. JSON, который я возвращаю, является объектом с несколькими свойствами. Для простоты приведенный ниже код имеет только одно свойство. Поскольку у меня есть несколько свойств, я использую ko.mapping.fromJS для сопоставления JSON с свойствами объекта. Все это, похоже, работает, за исключением того, что извлеченные данные не обновляются в пользовательском интерфейсе. Если я вручную обновляю наблюдаемый, он работает. Но не при использовании 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/

Answer 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/