击倒渲染完成后如何引发事件？

Question

这个jquery移动表正在进行淘汰.

<table data-role="table" id="report-table" class="ui-body-a ui-shadow ui-responsive table-stripe"
    data-column-btn-theme="a" data-column-btn-text="Spalten..." data-column-popup-theme="a" data-mode="columntoggle"">
    <thead>
        <tr data-bind="foreach: columns">
            <th data-bind="text: $data.Caption, attr: { 'data-priority': 1 + Math.floor($index() / 4) }"></th>
        </tr>
    </thead>
    <tbody data-bind="foreach: { data: rows, afterRender: tableRowAfterRender }">
        <tr data-bind="foreach: $parent.columns">
            <!-- ko template: { name: $data.template } -->
            <!-- /ko -->
        </tr>
    </tbody>
</table>

为了让"columntoggle"真正起作用,我目前正在使用"aferRender"事件:

self.tableRowAfterRender = function (element, data) {
    // Skip unless data.Items()[i] is not the last element in the rows collections
    for (var i = 0; i < data.Items().length - 1; i++) {
        if (data.Items()[i] !== self.rows()[self.rows().length - 1].Items()[i])
            return;
    }

    // refresh table after 100ms delay
    setTimeout(function () { $("#report-table").table("refresh"); }, 100);
}

这是不稳定的,我讨厌setTimeout()做事的方式,这种情况变得安静,我用jquery移动和淘汰赛.我需要一种强大的方法来提升一个事件,一旦所有的淘汰渲染,或理想情况下,一旦所有渲染涉及table-element内的元素完成.我能够在某些情况下使用自定义绑定,但我不知道如何在这里执行此操作.

Answer 1

尝试这个。将表格包裹起来：<div data-bind='template: { afterRender: myPostProcessingLogic }'>.然后在 myPostProsssingLogic 中执行您需要执行的操作。然而，只有在首次呈现表格时才会调用此方法。这是一个小提琴：

 <div data-bind='template: { afterRender: myPostProcessingLogic }'> 
<table data-role="table" id="report-table" class="ui-body-a ui-shadow ui-responsive table-stripe"
    data-column-btn-theme="a" data-column-btn-text="Spalten..." data-column-popup-theme="a" data-mode="columntoggle"">
    <thead>
        <tr data-bind="foreach: columns">
            <th data-bind="text: $data.Caption, attr: { 'data-priority': 1 + Math.floor($index() / 4) }"></th>
        </tr>
    </thead>
    <tbody data-bind="foreach: { data: rows, afterRender: tableRowAfterRender }">
        <tr data-bind="foreach: $parent.columns">
            <!-- ko template: { name: $data.template } -->
            <!-- /ko -->
        </tr>
    </tbody>
</table>