如何使用模板中的 Knockout 映射插件映射到来自服务器对象的数组？
我在理解 ko.mapping.fromJS 和 ko.mapping.toJS 的工作原理时遇到一些困难。 这里简化了我的问题的解释： 我有一个来自服务器的 Risk Array 对象，该 Risk 数组有一个 Places 数组。
由于某些奇怪的原因，在调用 ko.mapping.FromJS 后，我的子 Places 数组被清除或隐藏，因此我的模板无法访问其内容...我发现通过使用 ko.mapping.ToJS 我可以访问 Places内容，但通过这样做，添加项目后似乎没有刷新我的模板！
我正在尝试构建一个非常简单的网格，我可以在其中将位置添加到数组中的第一个 Risk 中以实现简化：
var FromServer = {"Risk":[{"SourceKey":0,"Places":{"Place":[{"SourceKey":1}]}}]}
var viewModel =
{
places : ko.mapping.fromJS(FromServer.Risk[0].Places.Place),
addPlace : function()
{
alert('Entering add place, places count:' + this.places.length);
this.places.push({SourceKey:"New SK"});
}
}
//If I leave this line it will update list but not refresh template
//If I comment it out it will show my Places array as empty!!!
viewModel = ko.mapping.toJS(viewModel)
ko.applyBindings(viewModel);
这是我的网格的示例 HTML 代码：
<p>You have asked for <span data-bind="text: places.length"> </span> place(s)</p>
<table data-bind="visible: places.length > 0">
<thead>
<tr>
<th>SourceKey</th>
</tr>
</thead>
<tbody data-bind='template: { name: "placeRowTemplate", foreach: places}'></tbody>
</table>
<button data-bind="click: addPlace">Add Place</button>
<script type="text/html" id="placeRowTemplate">
<tr>
<td><input class="required" data-bind="value: $data.SourceKey, uniqueName: true"/></td>
</tr>
</script>
这是我的 jsFiddle： jsFiddle Sample
我的问题是：为什么我必须用 ko.mapping.ToJS 解开我的 viewModel 以便我可以操作我的子数组？以及我该如何操作有我的模板在这种情况下会刷新吗？
请帮忙！
I'm having some trouble understanding how ko.mapping.fromJS and ko.mapping.toJS work.
Here the explanation of my problem simplified:
I have a Risk Array object coming from the Server, that Risk array has a Places array.
For some strange reason, after calling the ko.mapping.FromJS my child Places array gets cleared or hidden, so my template can't access its contents... I found that by using ko.mapping.ToJS I can get access to Places contents but by doing this It doesn't seem to refresh my template after adding an Item!
I'm trying to build a very simple grid where I can add places to the first Risk in the array for simplification purposes:
var FromServer = {"Risk":[{"SourceKey":0,"Places":{"Place":[{"SourceKey":1}]}}]}
var viewModel =
{
places : ko.mapping.fromJS(FromServer.Risk[0].Places.Place),
addPlace : function()
{
alert('Entering add place, places count:' + this.places.length);
this.places.push({SourceKey:"New SK"});
}
}
//If I leave this line it will update list but not refresh template
//If I comment it out it will show my Places array as empty!!!
viewModel = ko.mapping.toJS(viewModel)
ko.applyBindings(viewModel);
Here my sample HTML code for my grid:
<p>You have asked for <span data-bind="text: places.length"> </span> place(s)</p>
<table data-bind="visible: places.length > 0">
<thead>
<tr>
<th>SourceKey</th>
</tr>
</thead>
<tbody data-bind='template: { name: "placeRowTemplate", foreach: places}'></tbody>
</table>
<button data-bind="click: addPlace">Add Place</button>
<script type="text/html" id="placeRowTemplate">
<tr>
<td><input class="required" data-bind="value: $data.SourceKey, uniqueName: true"/></td>
</tr>
</script>
Here is my jsFiddle: jsFiddle Sample
My question is: why do I have to unwrap my viewModel with ko.mapping.ToJS so I can manipulate my child array?, and how can I have my template refreshing in this scenario?
Please help!
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
您的代码有一些问题。新的 JSFiddle 在这里：
http://jsfiddle.net/ueGAA/4/
您需要为places数组创建一个可观察的数组，否则knockout将不知道它什么时候更新了。方法调用为
ko.observableArray(arrayVar)
您不想在视图模型上调用 toJS。这会解开所有可观察量，并使 Knockout 无法更新您的绑定
当引用可观察数组时，您需要使用括号：即。 viewModel.places().length。
在您的 FromServer 对象中，您的 Place 对象包含一个数组，其中包含对象 {"SourceKey": 1} 。我假设您打算让 place 对象只有一个名为 SourceKey 的简单属性
You had a few things wrong with your code. New JSFiddle here:
http://jsfiddle.net/ueGAA/4/
You needed to create an observable array for the places array, otherwise knockout will not know when it has been updated. The method call is
ko.observableArray(arrayVar)
You do no want to call toJS on your view model. That unwraps all of the observables and makes Knockout not capable of updating your bindings
When referencing an observable array, you need to use parens: ie. viewModel.places().length.
In your FromServer object your Place object contained an array with the object {"SourceKey": 1} inside of it. I assumed you intended for the place object to just have a simple property called SourceKey