Question

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

这很有效。我已将click事件绑定到其中一个列，当单击时，将整个视图模型与所选客户端一起发送到控制器。代码的结果是从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();

如果我在没有mapper插件的情况下使用knockout，定义和填充可观察属性和数组，那么表行会正确更新，这是我的后退计划。请让我知道我哪里出错了。

编辑：在初步反馈之后我想说我在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插件后也尝试了这个。

Answer 1

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

ko.mapping.fromJS(results, self)

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

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

Answer 2

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

它们似乎是supposed to implement代码，可以完成以下工作：

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

使用ko.mapping.fromJS查看未使用服务器数据更新的模型

2 个答案: