Как связать сложные данные с пользовательским интерфейсом в KnockoutJS?

Question

У меня есть HTML-код, как показано ниже. Я привязываю данные к ярлыкам.

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

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

И мой нокаут сценарий, как показано ниже:

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 вызова правильно, но он не становится связан с пользовательским интерфейсом. Может ли кто-нибудь помочь мне, что я делаю неправильно здесь?

Answer 1

Ваше employeeData свойство не наблюдаемого, поэтому, когда обработчик Ajax success работает (вероятно, после того, как applyBindings был запущен) свойство будет переписано со ссылкой на наблюдаемый.

Сделайте что-нибудь, как это вместо:

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. 
    } 
    } 
}); 

Я рекомендую смотреть в «конструктор функций» для просмотра моделей, а также ko.mapping плагин.