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();
    }
}