के बाद नॉकआउट जेएस डोम

Question

अपडेट किया गया है मेरे विचार के हिस्से के रूप कैसे कोड को चलाने के लिए मेरे पास है:

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

मैं डोम अपडेट किया गया है एक बार नॉकआउट कुछ 3rd पार्टी कोड चलाना चाहते हैं।

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

किसी भी विचार पर मैं सही समय पर इसे कॉल करने के लिए नॉकआउट में कैसे लगा सकता हूं?

Answer 1

का उपयोग करना afterRender बाध्यकारी आप कर सकते हैं।

<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

इस तथ्य का उपयोग करने का एक सटीक तरीका है कि नॉकआउटजेएस अनुक्रमिक रूप से बाइंडिंग लागू करता है (जैसा कि वे HTML में प्रस्तुत किए जाते हैं)। आपको 'foreach-bound' तत्व के बाद वर्चुअल तत्व को परिभाषित करने और 'टेक्स्ट' बाइंडिंग को परिभाषित करने की आवश्यकता है जो आपके तृतीय पक्ष फ़ंक्शन को कॉल करता है।

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

यहाँ कोड है::

यहाँ एचटीएमएल है

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