ko.mapping.fromJS를 사용하여 비동기식 ajax 호출 후 녹아웃 관측 가능 업데이트

Question

간단한 사용 사례가 있습니다. WS를 비동기 적으로 호출하고 반환 된 JSON을 UI에 표시해야한다. JSON은 여러 속성을 가진 객체입니다. 간단히하기 위해 아래 코드에는 하나의 속성 만 있습니다. 여러 속성이 있으므로 ko.mapping.fromJS를 사용하여 JSON을 개체 속성에 매핑합니다. 가져온 데이터가 UI에서 업데이트되지 않는 것을 제외하면 모두 작동하는 것 같습니다. 관찰 대상을 수동으로 업데이트하면 작동합니다. 하지만 ko.mapping.fromJS를 사용할 때는 그렇지 않습니다. 당신은 jsfiddle을 실행할 수 있습니다

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

자바 스크립트

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. 이 라인은

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/