Knockoutjs 自定义绑定在项目完全渲染之前执行

我正在尝试对项目列表执行回调以使用数据表 http://datatables.net/。现在我想在渲染所有项目之后执行回调，而不是在渲染每个项目之后执行回调。跟随那个所以问题 https://stackoverflow.com/questions/17552042/knockoutjs-execute-callback-after-foreach-finishes-rendering我创建了简单的自定义绑定

ko.bindingHandlers.ConvertToDataTable = {
    update: function (element, valueAccessor, allBindings) {
        var list = ko.utils.unwrapObservable(valueAccessor()); //grab a dependency to the obs array        
        var tableId = allBindings().tableId;
        $('#' + tableId).dataTable({
            "sDom": "<'row'<'span6'l><'span6'f>r>t<'row'<'span6'i><'span6'p>>"
        });
    }
}

我的看法是：

<table class="table table-striped table-bordered" data-bind="attr: { id: tableId }">
    <thead>
        <tr>
            <td>Task Name</td>
            <td>Task Description</td>
        </tr>
    </thead>
    <tbody>
        <!-- ko foreach: tasks, ConvertToDataTable: tasks, tableId: tableId -->
        <tr>
            <td data-bind="text: Name"></td>
            <td data-bind="text: Details"></td>
        </tr>
        <!-- /ko -->
    </tbody>
</table>

该代码工作正常，但项目数量较少。但如果有大量记录（例如 500 条），自定义绑定会在我的项目完全呈现之前执行。有什么想法吗？

Update
我通过 AJAX 从服务器获取数据，所以也许我的自定义绑定首先执行，而我的可观察数组items是空的

从逻辑的角度来看，不应该ConvertToDataTable绑定在桌子本身上，而不是在foreach?

另外，您不应该通过绑定或视图模型来控制表布局吗？自定义绑定对于硬编码值来说是一个非常糟糕的地方。

Anyway, controlsDescendantBindings是你的朋友 （docs http://knockoutjs.com/documentation/custom-bindings-controlling-descendant-bindings.html):

自定义绑定：

ko.bindingHandlers.dataTable = {
    init: function () {
        return { controlsDescendantBindings: true };
    },
    update: function (element, valueAccessor, allBindings, viewModel, bindingContext) {
        var layout = valueAccessor();

        ko.applyBindingsToDescendants(bindingContext, element);
        $(element).dataTable({ "sDom": layout });
    }
};

查看型号：

{
    dataTableLayout: "<'row'<'span6'l><'span6'f>r>t<'row'<'span6'i><'span6'p>>",
    tasks: ko.observableArray([/* ... */])
}

模板：

<table data-bind="dataTable: dataTableLayout">
    <thead>
        <tr>
            <td>Task Name</td>
            <td>Task Description</td>
        </tr>
    </thead>
    <tbody data-bind="foreach: tasks">
        <tr>
            <td data-bind="text: Name"></td>
            <td data-bind="text: Details"></td>
        </tr>
    </tbody>
</table>

http://jsfiddle.net/WcaM5/ http://jsfiddle.net/WcaM5/

免责声明：我不知道 jQuery DataTables 到底是如何工作的，所以示例是aircode。我想说的是，如果有必要，您可以手动控制绑定。