33

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?

3
  • What exactly do you want to change? Are these properties already present on the caseStudies?
    – thomaux
    Commented Jan 18, 2013 at 13:51
  • I don't want to change anything I need a third party library to attach events to the links .
    – Magpie
    Commented Jan 18, 2013 at 14:36
  • Could you possibly provide us a Fiddle?
    – thomaux
    Commented Jan 18, 2013 at 15:00

2 Answers 2

37

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();
    }
}
3
  • 1
    How to do it if I was using something other than 'foreach', like 'option'?
    – AbdelHady
    Commented Sep 17, 2013 at 13:33
  • 1
    @AbdelHady You can use the optionsAfterRender callback: knockoutjs.com/documentation/options-binding.html Commented Sep 17, 2013 at 15:57
  • 2
    This does not work on subsequent updates.. Eg. caseStudies.reverse() does not callback even tho the DOM has changed
    – pravin
    Commented Aug 7, 2015 at 15:53
18

One accurate way is to use the fact that KnockoutJS applies bindings sequentially (as they are presented in html). You need define a virtual element after 'foreach-bound' element and define 'text' binding that calls your third party function.

Here is html:

<ul data-bind="foreach: items">
    <li data-bind="text: text"></li>
</ul>
<!-- ko text: ThirdParyFunction () -->
<!-- /ko -->

Here is code:

    $(function () {
        var data = [{ id: 1, text: 'one' }, { id: 2, text: 'two' }, { id: 3, text: 'three' } ];

        function ViewModel(data) {
            var self = this;
            this.items = ko.observableArray(data);
        }

        vm = new ViewModel(data);
        ko.applyBindings(vm);
    });

    function ThirdParyFunction() {
        console.log('third party function gets called');
        console.log($('li').length);
    }
3
  • 1
    afterRender was causing duplicate event triggers, and this approach worked fine for me.
    – misha
    Commented Jul 4, 2015 at 6:56
  • Dude!! that was just awesome.. Thanks a lot for sharing
    – pravin
    Commented Aug 7, 2015 at 15:51
  • 1
    Very important note: I've used this method many times, just make sure you read the value of any observable-changes that would require your code to re-run. example: function ThirdParyFunction(){ this.label(); console.log('run 3rd party code every time label changed'); } otherwise - this code will only run once.
    – Shai Petel
    Commented Dec 8, 2020 at 14:56

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.