我正在将 .Net 对象序列化为 javascript 对象以与 Knockout 一起使用。我正在尝试使用 Knockout 的映射插件来构建视图模型，而不必指定我的淘汰视图模型的所有 observable 和 observableArray 属性。该页面将构建视图模型、加载数据并构建基本表。
这很好用。我已将单击事件绑定到其中一个列，当单击该列时，会将整个视图模型与选定的客户端一起发送到控制器。代码的结果是从 ProbationOfficeWideQueueItems 集合中删除了一条记录，我已经能够通过检查 ajax 调用中返回的值来验证这一点。
我遇到的问题是视图模型似乎没有通过 ko.mapping.fromJS 调用更新。我检查了文档和其他多个堆栈溢出帖子，但找不到任何错误：
- MVC 4(Razor) KnockoutJS & DataTable
- Knockout.js ko.mapping.toJS 在我看来没有刷新数据
- Knockout.js - ko.mapping.fromJS - 可见绑定未更新
- 为什么一个 ko.mapping.fromJS 工作而另一个不工作？
- http://knockoutjs.com/documentation/plugins-mapping.html
这是整个页面，包括 HTML 和 Javascript：
<div id="probationOfficeWideQueue-@ViewData("UniqueID")">
<table id="data-grid-@ViewData("UniqueID")" class="data-grid-@ViewData("UniqueID")">
<thead>
<tr>
<th>Client Number</th>
<th>Client Name</th>
<th>Officer</th>
<th>Check In</th>
<th>Send To</th>
</tr>
</thead>
<tbody data-bind="foreach: ProbationOfficeWideQueueItems">
<tr>
<td data-bind="text: ClientNumber"></td>
<td data-bind="text: ClientName"></td>
<td data-bind="text: Officer"></td>
<td data-bind="click: $root.checkInClient"></td>
<td><input data-bind="value: SendToOfficer, text: Officer" /></td>
</tr>
</tbody>
</table>
<script type="text/javascript">
var viewModel = @Html.Raw(New JavaScriptSerializer().Serialize(Model));
function ProbationOfficeWideQueueViewModel(data) {
var self = this;
ko.mapping.fromJS(data, {}, self);
self.checkInClient = function(row) {
openLoadScreen();
self.SelectedClientPIN = row.ClientPIN;
$.ajax({
type: "POST",
url: getRoot() + "Probation/ProbationOfficeWideQueue/CheckInClient",
data: ko.toJSON(self),
contentType: "application/json",
success: function(results){
ko.mapping.fromJS(results, self)
closeLoadScreen();
},
error: function(error){
closeLoadScreen();
}
});
}
};
function EnhanceDataTable() {
$('.data-grid-@ViewData("UniqueID")').dataTable({
"bPaginate": false,
"bLengthChange": false,
"aaSorting": [[1, 'asc'], [2, 'asc']],
"oLanguage": {
"sSearch": "Filter: "
},
"fnDrawCallback": function(){
$('table.data-grid td').bind('mouseenter', function () { $(this).parent().children().each(function(){$(this).addClass('dataTableRowHighlight');}); });
$('table.data-grid td').bind('mouseleave', function () { $(this).parent().children().each(function(){$(this).removeClass('dataTableRowHighlight');}); });
}
});
};
ko.applyBindings(new ProbationOfficeWideQueueViewModel(viewModel), $("#probationOfficeWideQueue-@ViewData("UniqueID")")[0]);
EnhanceDataTable();
如果我在没有映射器插件的情况下使用敲除，定义和填充可观察的属性和数组，表行会正确更新，这是我的后备计划。请让我知道我哪里出错了。
编辑：在最初的反馈之后，我想说我已经尝试在我的 ajax 调用的成功函数中使用 ko.mapping.fromJS(results, self) 行上的分号。我还尝试了对成功方法中的行进行以下更改：
- self = ko.mapping.fromJS(results);
- self = ko.mapping.fromJS(results, {}, self);
- ko.mapping.fromJS(results, {}, self);
- ko.mapping.fromJSON(results, {}, self);
我还尝试将其分配给 Model 属性，例如以下示例之一：
- self.Model = ko.mapping.fromJS(results, {}, self);
在禁用表上的 DataTables.net 插件后，我也尝试过此操作。