KO: how to subscribe to UI updated for post-processing?

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.

Jason Goemaat · Accepted Answer · 2012-08-18 07:49:01Z

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

Collectives™ on Stack Overflow

KO: how to subscribe to UI updated for post-processing?

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related