Datatables init ajax 请求初始值

Question

我有一个带有数据tables 和 knockout js 的应用程序。

KnockoutJS 应用程序用于管理关键字（标签）以进行额外过滤table。

var table = $("#news").DataTable({
    "ajax": {
        url: "{{ base_url('news/load_news/full') }}",
        data: function (d) {
            d.keywords = ko.toJSON(keywords.keywords);
        }
    },
    "processing": true,
    "serverSide": true,
    "bFilter": false,
    "bLengthChange": false
});

KnockoutJS 模型在页面加载时通过 Ajax 请求填充。

我遇到的主要问题是第一个 Datatables Ajax 请求，我有空关键字数组。如果我点击更新 table 按钮，d.keywords 不为空。

我认为这个问题是因为 Ajax 请求是异步的，所以我如何强制数据tables 等待 KnockoutJS 应用填充完成？

==================

   function refresh_table() {
        table.ajax.reload(null, false); // reload DataTable
        fresh_news_alert.hide();
    }

Answer 1

您应该将 DataTable 初始化放在自定义绑定中。这将确保在初始化和绑定 Knockout 视图模型之前不会调用它。

Answer 2

此解决方案使用我创建的自定义绑定，该绑定依赖于一个 knockout fork。如果您喜欢此解决方案，请在拉取请求上发表评论以使其合并 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 };
        }
    };

Datatables init ajax 请求初始值

Datatables init ajax request initial value

javascript

ajax

datatables

knockout.js