Question

In my page, I have a drop down (select) and then a table, both of which are bound to the view model. When I change the drop down the table refreshes with the data associated with that item in the select.

I want to do some UI processing on the table after it is populated. I tried subscribing to the drop down selection (which does get fired and my function called) but the table data is updated after the subscribe completes.

What I want to do is update the table background row colors using a simple function like so:

updateRowBgColors = function (tableId) {
    $("#" + tableId + " tr:gt(0):odd").css("background-color", "#f7f7f7");
    $("#" + tableId + " tr:gt(0):even").css("background-color", "#fff");
};

Yes, I know I can set a class for alternating rows in the data-binding in html, but that wouldn’t answer my question about why this wouldn’t work.

Answer 1

You can use the afterRender binding along with your foreach binding:

<table>
    <tbody data-bind="foreach: {data: people, afterRender: doYourThing}">
        <tr>
            <td data-bind="text: Name"></td>
            <td data-bind="text: Number"></td>
        </tr>
    </tbody>
</table>

And in your view model:

self.doYourThing = function(insertedDomElementArray, dataItem) {
    $('tr:odd').css("background-color", "#f7f7f7");
    $('tr:even').css("background-color", "#fff");
};

fiddle