How to run code after Knockout JS has updated the DOM

Question

As part of my view I have:

<ul data-bind="foreach: caseStudies">     <li><a data-bind="text: title, attr: { href: caseStudyUrl }"></a></li> </ul> 

I want to run some 3rd Party code once knockout has updated the DOM.

caseStudies(data); thirdPartyFuncToDoStuffToCaseStudyLinks(); <-- DOM not updated at this point. 

Any idea on how I can hook into knockout to call this at the correct time?

Answer 1

Using the afterRender binding can help you.

<ul data-bind="foreach: { data:caseStudies, afterRender:checkToRunThirdPartyFunction }">     <li><a data-bind="text: title, attr: { href: caseStudyUrl }"></a></li> </ul>   function checkToRunThirdPartyFunction(element, caseStudy) {     if(caseStudies.indexOf(caseStudy) == caseStudies().length - 1){         thirdPartyFuncToDoStuffToCaseStudyLinks();     } }