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 的回复，然后对此进行更多调查，我认为我初始化模型的方式不正确。我猜一个人不能使用现有的视图模型，然后期望它与映射器插件一起使用。因此，您可以使用 ko.mapping.fromJS 使用原始 JSON 数据初始化视图模型：

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

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

Answer 2

您不能通过这种方式重新分配模型来覆盖它。

当你这样做时：

ko.applyBindings(helloWorldModel);

您说的是“将模型helloWorldModel 绑定到页面”。然后，Knockout 将遍历该模型中的可观察对象并将它们与页面绑定。

现在当你在这里覆盖你的表单模型时：

helloWorldModel = ko.mapping.fromJS(serverData, helloWorldModel);

它正在用一个全新的对象覆盖您的模型对象，其中包含全新的可观察对象。

要修复它，您需要将此行更改为：

ko.mapping.fromJS(serverData, helloWorldModel);

这会处理模型内部的属性并为您重新分配它们，而不会覆盖您的模型。