Javascript 使用KnockoutJS和Knockout-mapper.js的DataTables绑定不起作用

我有一个关于如何使用KnockoutJS和knockoutmapper绑定数据表的教程。从我所看到的，我只需要给我的对象和应用绑定到表，但当我这样做时，我并没有得到任何错误和显示数据。我错过了什么

控制器JSON数据：

public virtual JsonResult GetRecordsJsonResult()
    {
        var userBusinessLogic = InterfaceResolver.ResolveWithTransaction<IUserBusinessLogic>();
        var records = userBusinessLogic.GetAll().Select(x => new
        {
            x.Id,
            x.FirstName,
            x.LastName,
            x.Email
        }).OrderBy(i => i.Id);

        var data = Json(new
        {
            max = records.Count(),
            items = records
        }, JsonRequestBehavior.AllowGet);

        return data;
    }

我得到的JSON数据示例

HTML:

来自浏览器的控制台日志：

---

我想在我如何从控制器获取项目时可能会有错误，因为当我遵循教程时，一切都正常。有什么想法吗？谢谢您的时间。

是的，上面的例子有很多错误。。。这是最简单的解决方案，可以让淘汰赛很好地处理数据表

此解决方案使用我创建的自定义绑定，该绑定依赖于敲除叉。如果您喜欢此解决方案，请在pull请求上留下评论，以便合并intp knockout 3.4，谢谢

---

它是否显示不带$items行的表。DataTable{responsive:true}；？还用谢谢你，我很想念你

<script type="text/javascript">

    $(function () {
        function viewModel(data) {
            console.log("viewModel");
            var self = this;
            ko.mapping.fromJS(data, {}, self);
            console.log(self);
            console.log("data");
            console.log(data);
        }
        $.ajax({
            url: "@Url.Action("GetRecordsJsonResult")", success: function (data) {
                ko.applyBindings(new viewModel(data));
                $("#items").DataTable({ responsive: true });
            }
        });
    });

 </script>

<table id="items" class="display table table-striped table-responsive table-bordered table-hover">
    <thead>
        <tr>
            <th>ID</th>
            <th>First name</th>
            <th>Last name</th>
            <th>Email</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td><span data-bind="text: $data.Id"></span></td>
            <td><span data-bind="text: $data.FirstName"></span></td>
            <td><span data-bind="text: $data.LastName"></span></td>
            <td><span data-bind="text: $data.Emaiol"></span></td>
        </tr>
    </tbody>
</table>

ko.bindingHandlers.DataTablesForEach = {

        init: function (element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {
             var nodes = Array.prototype.slice.call(element.childNodes, 0);
            ko.utils.arrayForEach(nodes, function (node) {
                if (node && node.nodeType !== 1) {
                    node.parentNode.removeChild(node);
                }
            });
            return ko.bindingHandlers.foreach.init(element, valueAccessor, allBindingsAccessor, viewModel, bindingContext);
        },
        update: function (element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {

            var value = ko.unwrap(valueAccessor()),
            key = "DataTablesForEach_Initialized";

            var newValue = function () {
                return {
                    data: value.data || value,
                    beforeRenderAll: function (el, index, data) {

                        if (ko.utils.domData.get(element, key)) {
                            $(element).closest('table').DataTable().clear();
                            $(element).closest('table').DataTable().destroy();
                        }
                    },
                    afterRenderAll: function (el, index, data) {
                        $(element).closest('table').DataTable(value.options);
                    }

                };
            };

            ko.bindingHandlers.foreach.update(element, newValue, allBindingsAccessor, viewModel, bindingContext);

            //if we have not previously marked this as initialized and there is currently items in the array, then cache on the element that it has been initialized
            if (!ko.utils.domData.get(element, key) && (value.data || value.length)) {
                ko.utils.domData.set(element, key, true);
            }

            return { controlsDescendantBindings: true };
        }
    };