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

Question

我在here 的以下教程中介绍了如何将 DataTables 与 KnockoutJS 和 Knockout 映射器绑定。从我所见，我只需要提供我的对象并将绑定应用到表，但是当我这样做时，我什么也得不到（没有错误，也没有显示数据）。我错过了什么？

控制器 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：

<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>

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

我认为我从控制器获取项目的方式可能存在错误，因为当我遵循教程时一切正常。有任何想法吗？感谢您的宝贵时间。

Answer 1

是的，上面的例子有很多问题......这是让淘汰赛与数据表很好玩的最简单的解决方案......

此解决方案使用我创建的自定义绑定，该绑定依赖于淘汰赛叉。如果您喜欢此解决方案，请在拉取请求上发表评论，以使其合并 intp 淘汰赛 3.4，谢谢。

example on jsfiddle

knockout pull request

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 };
        }
    };