KnockoutJS에서 복잡한 데이터를 UI에 바인딩하는 방법은 무엇입니까?

Question

다음과 같은 HTML 코드가 있습니다. 데이터를 레이블에 바인딩하고 있습니다.

self.employeeData = { Id: ko.observable(" "),Name:ko.observable(" ") }; 

self.getEmployee = function(data, event){ 
    $.ajax({ 
    type: "Get", 
    url: 'http://localhost:8081/api/Values/GetEmployee', 
    dataType: "json", 
    cache: false, 
    async: false, 
    crossDomain:true, 
    dataType : 'json', 
    success: function (data) { 
     self.employeeData = ko.observable(data); 
    }, 
    error: function() { 
     alert("Error"); 
    } 
}); 

내가 제대로 Ajax 호출로부터 데이터를 얻고 있지만,이 UI에 바인딩 점점되지 않습니다

data-bind="text: employeeData.Id, valueUpdate:'keyup'" 

data-bind="text: employeeData.Name, valueUpdate:'keyup'" 

그리고 내 녹아웃 스크립트는 다음과 같습니다. 누구든지 내가 여기서 잘못하고있는 것을 도울 수 있습니까?

Answer 1

귀하의 employeeData 속성은 관찰 아니므로, 아약스 success 핸들러 (applyBindings 실행 한 아마 후) 실행될 때 속성은 관찰에 대한 참조를 덮어 쓰게됩니다.

이 대신 같은 것을 수행 내가보기 모델 "생성자 함수"뿐만 아니라 ko.mapping 플러그인에보고하는 것이 좋습니다

function getEmployee(data) { 
    data = data || {}; 
    return { 
    Id: ko.observable(data.Id || " "), 
    Name: ko.observable(data.Name || " ") 
    }; 
} 

self.employeeData = ko.observable(getEmployee()); 

self.getEmployee = function(data, event){ 
    $.ajax({ 
    type: "Get", 
    url: 'http://localhost:8081/api/Values/GetEmployee', 
    success: function (data) { 
     // option 1: 
     self.employeeData(getEmployee(data)); 

     // option 2: 
     self.employeeData().Id(data.Id); 
     self.employeeData().Name(data.Name); 

     // option 3: 
     // use ko.mapping library and its update functionality 

     // option 4: 
     // use constructor functions and give them a "loadData" method, for ex. 
    } 
    } 
}); 

.