Come eseguire il codice dopo Knockout JS ha aggiornato il DOM

Question

Come parte del mio punto di vista ho:

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

voglio eseguire del codice 3rd Party volta ad eliminazione diretta ha aggiornato il DOM.

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

Qualche idea su come posso eseguire il knockout per chiamare questo al momento giusto?

Answer 1

Utilizzando la afterRender legame può aiutare.

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

Answer 2

Un modo preciso consiste nell'utilizzare il fatto che KnockoutJS applica i binding in modo sequenziale (come sono presentati in html). È necessario definire un elemento virtuale dopo l'elemento "foreach-bound" e definire l'associazione "testo" che chiama la funzione di terze parti.

Qui è HTML:

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

Ecco il codice:

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