Question

我从here获得了关于如何使用KnockoutJS和Knockout映射器绑定DataTables的以下教程。从我可以看到我只需要给我的对象并应用绑定到表但当我这样做时我没有得到任何东西（没有错误和没有显示数据）。我错过了什么？

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

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

1 个答案: