javascript 淘汰赛 - ko.mapping.fromJS 不工作
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/21924495/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
knockoutjs - ko.mapping.fromJS not working
提问by 6ton
I have just started trying knockout.js. The ko.mapping offers a nifty way to get and map data from server. However I am unable to get the mapping to work.
我刚刚开始尝试knockout.js。ko.mapping 提供了一种从服务器获取和映射数据的好方法。但是我无法使映射工作。
I have a simple model:
我有一个简单的模型：
//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));
}
The helloWorldModel has only 2 attributes - exactly the same thing I return from the server. The alert in mapServerData shows -
helloWorldModel 只有 2 个属性 - 与我从服务器返回的完全相同。mapServerData 中的警报显示 -
{"name":"chicken","message":"JSON hello world"}
I have looked up other posts regarding similar problem, but none of them seemed to be solve this issue. Maybe I am missing something very basic - wondering if anyone can point it out.
我查过其他关于类似问题的帖子，但似乎没有一个能解决这个问题。也许我错过了一些非常基本的东西 - 想知道是否有人可以指出它。
Also note if I do not declare the model upfront and use
另请注意，如果我没有预先声明模型并使用
helloWorldModel = ko.mapping.fromJS(serverData);
it is mapping the data to my form correctly.
它正确地将数据映射到我的表单。
回答by 6ton
From Richard's reply and then a little more investigation into this I think that the way I was initializing the model is incorrect. I guess that one cannot use an existing view model and then expect it to work with mapper plugin. So instead you initialize view model with raw JSON data using the ko.mapping.fromJS:
从理查德的回复以及对此进行的更多调查中，我认为我初始化模型的方式不正确。我想不能使用现有的视图模型，然后期望它与映射器插件一起使用。因此，您可以使用 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);
}
This code works and provides the expected behavior
此代码有效并提供预期的行为
回答by Richard Rout
You can't just overwrite your model by reassigning it this way.
您不能通过以这种方式重新分配模型来覆盖模型。
When you do:
当你这样做时：
ko.applyBindings(helloWorldModel);
ko.applyBindings(helloWorldModel);
You are saying "bind the model helloWorldModelto the page". Knockout then goes through and hooks up the observables in that model and binds them with the page.
您说的是“将模型绑定helloWorldModel到页面”。Knockout 然后通过并连接该模型中的 observables 并将它们与页面绑定。
Now when you overwrite your form model here:
现在，当您在此处覆盖表单模型时：
helloWorldModel = ko.mapping.fromJS(serverData, helloWorldModel);
helloWorldModel = ko.mapping.fromJS(serverData, helloWorldModel);
It is overwriting your model object with a brand new object with entirely new observables in it.
它正在用一个全新的对象覆盖您的模型对象，其中包含全新的可观察对象。
To fix it you need to change this line to just:
要修复它，您需要将此行更改为：
ko.mapping.fromJS(serverData, helloWorldModel);
ko.mapping.fromJS(serverData, helloWorldModel);
This takes care of the properties inside the model and reassigns them for you, without overwriting your model.
这会处理模型内部的属性并为您重新分配它们，而不会覆盖您的模型。
