使用来自服务器的数据的 ko.mapping.fromJS 未更新视图模型答案

【问题标题】：View model not getting updated using ko.mapping.fromJS with data from the server使用来自服务器的数据的 ko.mapping.fromJS 未更新视图模型
【发布时间】：2013-07-17 19:11:56
【问题描述】：

我正在将 .Net 对象序列化为 javascript 对象以与 Knockout 一起使用。我正在尝试使用 Knockout 的映射插件来构建视图模型，而不必指定我的淘汰视图模型的所有 observable 和 observableArray 属性。该页面将构建视图模型、加载数据并构建基本表。

这很好用。我已将单击事件绑定到其中一个列，单击该列时会将整个视图模型与选定的客户端一起发送到控制器。代码的结果是从 ProbationOfficeWideQueueItems 集合中删除了一条记录，我已经能够通过检查 ajax 调用中返回的值来验证这一点。

我遇到的问题是视图模型似乎没有通过 ko.mapping.fromJS 调用进行更新。我检查了文档和其他多个堆栈溢出帖子，没有发现任何错误：

这是整个页面，包括 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);

我还尝试将其分配给模型属性，例如以下示例之一：

self.Model = ko.mapping.fromJS(results, {}, self);

我在禁用表格上的 DataTables.net 插件后也尝试过。

【问题讨论】：

标签： model-view-controller knockout.js mapping

【解决方案1】：

当淘汰赛发生变化时，jQuery Datatables 不会自动更新。

看起来它们是supposed to implement 代码，可以使以下工作：

$('.data-grid-123').dataTable('refresh');

【讨论】：

问题不在于数据没有绑定，而是 DataTables.net 没有正确更新。谢谢

【解决方案2】：

您没有将映射结果捕获到 komodel：

ko.mapping.fromJS(results, self)

基于Knockout.js ko.mapping.toJS not refreshing data in my view 看起来应该是这样的

ko.mapping.fromJS(data, {}, contract_model);

【讨论】：

该行还缺少一个分号。
这个答案表明中间的 {} 不是可选的：stackoverflow.com/a/9304787/57883
我更新了我的问题以包括我记得尝试过的所有排列。