javascript - knockoutjs - ko.mapping.fromJS 不工作

Question

我刚刚开始尝试 knockout.js。 ko.mapping 提供了一种从服务器获取和映射数据的绝妙方法。但是我无法使映射正常工作。

我有一个简单的模型:

//var helloWorldModel;
var helloWorldModel = {
    name: ko.observable('Default Name'),
    message: ko.observable('Hello World Default')
};


$(document).ready(function() {
  ko.applyBindings(helloWorldModel);
      //a button on the form when clicked calls a server class 
      //to get json output
  $('#CallServerButton').click(getDataFromServer);
});

function getDataFromServer() {
  $.getJSON("HelloSpring/SayJsonHello/chicken.json", function(data) { 
    mapServerData(data);
  });
}

function mapServerData(serverData) {
  helloWorldModel = ko.mapping.fromJS(serverData, helloWorldModel);
  alert(JSON.stringify(serverData));
}

helloWorldModel 只有 2 个属性 - 与我从服务器返回的完全相同。 mapServerData 中的警报显示 -

{"name":"chicken","message":"JSON hello world"}

我已经查过其他关于类似问题的帖子，但似乎没有一个能解决这个问题。也许我遗漏了一些非常基本的东西 - 想知道是否有人可以指出。

另请注意，如果我不预先声明模型并使用

 helloWorldModel = ko.mapping.fromJS(serverData);

它正确地将数据映射到我的表单。

Answer 1

根据 Richard 的回复和对此的更多调查，我认为我初始化模型的方式不正确。我想不能使用现有的 View 模型然后期望它与映射器插件一起工作。因此，您可以使用 ko.mapping.fromJS 使用原始 JSON 数据初始化 View 模型:

var helloWorldModel;

$(document).ready(function() {
  var defaultData = {
      name: 'Default Name',
      message: 'Hello World Default'
  };

  helloWorldModel = ko.mapping.fromJS(defaultData);
  ko.applyBindings(helloWorldModel);
  $('#CallServerButton').click(getDataFromServer);
});

function getDataFromServer() {
  $.getJSON("HelloSpring/SayJsonHello/chicken.json", function(data) { 
    mapServerData(data);
  });
}

function mapServerData(serverData) {
  alert(JSON.stringify(serverData));
  ko.mapping.fromJS(serverData, helloWorldModel);
}

此代码有效并提供了预期的行为