Làm thế nào để chạy mã sau Knockout JS đã cập nhật DOM

Question

Là một phần của quan điểm của tôi, tôi có:

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

Tôi muốn chạy một số mã 3rd Party lần loại trực tiếp đã được cập nhật DOM.

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

Bất kỳ ý tưởng nào về cách tôi có thể móc vào loại trực tiếp để gọi điều này vào đúng thời điểm?

Answer 1

Sử dụng afterRender ràng buộc có thể giúp bạn.

<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

Một cách chính xác là sử dụng thực tế là KnockoutJS áp dụng bindings tuần tự (như họ được thể hiện trong html). Bạn cần xác định một phần tử ảo sau phần tử 'foreach-bound' và định nghĩa ràng buộc 'text' để gọi hàm bên thứ ba của bạn.

Dưới đây là html:

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

Đây là mã:

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