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

从理查德的回复然后再对此进行一些调查我认为我初始化模型的方式是不正确的。我想那个人不能使用现有的视图模型，然后期望它可以使用mapper插件。因此，您使用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然后通过并连接该模型中的observable并将它们与页面绑定。

现在，当您在此处覆盖表单模型时：

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

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

要解决此问题，您需要将此行更改为：

ko.mapping.fromJS(serverData, helloWorldModel);

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

knockoutjs - ko.mapping.fromJS无效

2 个答案: