I need to know when KO is done rendering DOM elements

[lecynkar]

I'm using the built in templating with KO, and I need to know when KO
is done rendering the table data DOM elements so that I can apply some
formating on it. See the table code below:

<table id="StatusRecipientsTable" class="DataGridTable">
<thead>
<tr>
<th class="Sortable" data-bind="click:
statusTableSortByNameClick">Member Name</th>
<th class="Sortable" data-bind="click:
statusTableSortByEmailAddressClick">Email Address</th>
<th class="Sortable">Date Sent</th>
<th class="Sortable">Date Read</th>
<th class="Sortable" data-bind="click:
statusTableSortByStatusClick">Status</th>
<th>Error Message</th>
<th />
</tr>
</thead>
<tbody data-bind='foreach: { data:
recipientsForStatusTableFilteredByStatus, afterRender:
stripeStatusRecipientsTableOnChange }'>
<tr>
<td data-bind="text: Name"></td>
<td data-bind="text: EmailAddress"></td>
<td data-bind="text: SendDate"></td>
<td data-bind="text: ReadDate"></td>
<td data-bind="text: Status"></td>
<td data-bind="text: ErrorMessage"></td>
<td class="Center"><a href='#' class="RemoveLink" data-bind='click:
$root.deleteRecipient'>Remove</a></td>
</tr>
</tbody>
</table>

I'm using the afterRender hook, but when I filter the underlying data
it's length property is not consistent with the table rows being
rendered. I need to know when it's done rendering

Here is the afterRender function:

var stripTableRowCounter = 0;

viewModel.stripeStatusRecipientsTableOnChange = function (element) {
stripTableRowCounter++;
if (vm.recipientsForStatusTableFilteredByStatus().length ===
stripTableRowCounter) { // This is equal when the last DOM element is
rendered
$('#StatusRecipientsTable tbody tr:odd').addClass('Stripe');
stripTableRowCounter = 0;
}
};

My Observable Code:

viewModel.recipientsForStatusTableFilteredByStatus =
ko.computed(function () {
var filter = this.recipientsEmailStatusFilter();
if (filter === "All") {
return this.recipientsForStatusTable();
} else {
return ko.utils.arrayFilter(this.recipientsForStatusTable(),
function (item) {
if (item.Status() === filter) {
return true;
}
});
}
}, viewModel);