在项目完全呈现之前执行 Knockoutjs 自定义绑定

问题描述

我正在尝试对项目列表执行回调以使用 DataTable 进行分页.现在我想在我的所有项目都被呈现之后而不是在每个项目被呈现之后执行我的回调.在 SO 问题之后，我创建了简单的自定义绑定

I'm trying to execute callback on list of items to make pagination using DataTable. Now i want to execute my callback after all my items have been rendered not after each item is rendered. Following that SO question i created simple custom binding

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)的情况下，自定义绑定会在我的项目完全重新生成之前执行..有任何想法吗?

That code works fine but with small number of items. but incase of big number of recoreds(e.g 500) the custom binding is executed before my items are fully renedered..Any Ideas?

更新
我通过 AJAX 从服务器获取我的数据，所以当我的可观察数组 items 为空时，我的自定义绑定可能会首先执行

Update
I get my data from server via AJAX, so maybe my custom binding is executed first while my observable array items is empty

推荐答案

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

From a logical point of view, shouldn't the ConvertToDataTable binding be on the table itself, instead on the foreach?

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

Also, shouldn't you control table layout via the binding or the view model? The custom binding is a very bad place for hard-coded values.

无论如何，controlsDescendantBindings 是您的朋友(文档):

Anyway, controlsDescendantBindings is your friend (docs):

自定义绑定:

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/

免责声明:我不确切知道 jQuery DataTables 是如何工作的，因此示例是 aircode.我想说明的一点是，如有必要，您可以手动控制绑定.

Disclaimer: I don't know exactly how jQuery DataTables work, so the sample is aircode. The point I want to make is that you can take manual control over the binding if necessary.

这篇关于在项目完全呈现之前执行 Knockoutjs 自定义绑定的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！