Jak uruchomić kod po Knockout JS uaktualnili DOM

Question

Jako część moim zdaniem mam:

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

chcę uruchomić jakiś kod 3rd party raz nokaut uaktualnili DOM.

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

Każdy pomysł, w jaki sposób mogę uzyskać nokaut, aby zadzwonić do niego we właściwym czasie?

Answer 1

Używanie afterRender wiążący może pomóc.

<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

Jednym z dokładnych sposobów jest wykorzystanie faktu, że KnockoutJS stosuje sekwencje kolejno (tak jak są one przedstawione w html). Musisz zdefiniować wirtualny element po elemencie "foreach-bound" i zdefiniować powiązanie "text", które wywołuje twoją funkcję strony trzeciej.

Oto html:

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

Oto kod:

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