Javascript 如何在KnockoutJS中将复杂数据绑定到UI？

我有如下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调用中获取数据，但它没有绑定到UI。有人能告诉我我做错了什么吗？

您的

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插件。

您对ko.applyBindings的调用在哪里？@BonMacalindong:它在文件的底部。其他绑定正在顺利进行，比如单击某个按钮，我就能够更改字符串类型的标签文本。在上面的例子中，我正在处理复杂的对象，这就是我遇到麻烦的地方，为什么你要

self.employeeData=ko.observable（数据）？这是不是超过了你的模型？你不应该做self.employeeData.Id（data.Id）

？你看过文件了吗@Cristy，self.employeeData.Id（data.Id）这很好，但是如果我有30多个属性呢？把它们都一一写下来是不是很忙？如果是List（员工列表），我们该怎么办？@yashwanth您可以创建一个函数将数据加载到您的对象中。如果所有属性名称都相同，您可以简单地迭代

数据

对象的键，并更新您的可观察值，正如我前面所说的。如果不使用淘汰更新函数而重新构建整个对象，这不是效率低下吗？（

model.attributeName（newValue）

，例如：

employeeData.Id（27）

？是的，这是一个很好的观点，但我假设这两个属性可能正是OP示例中的属性。我将稍微更新答案，以说明这两种方法。