Javascript Girl
  1. Javascript Girl
  3. Comment exécuter le code après Knockout JS a mis à jour le DOM
Intereting Posts
FancyBox affiche le contenu d'un DIV comme type iFrame Comment obtenir un événement de carrelage pour un clic dans le groupe de marqueurs de tracts? Comment puis-je afficher des exemples de code sur des pages Web avec un bon style de syntaxe comme le débordement de pile? Comment puis-je déterminer si une image a été chargée, en utilisant Javascript / jQuery? Résoudre les références circulaires à partir de l'objet JSON Discrepancy in JSON.stringify of date values ​​dans différents navigateurs Meilleure façon de charger le script dynamique Changement dynamique d'un paramètre d'objet avec jQuery Effet de fond de parallaxe de défilement vertical Obtenir l'ID de l'élément appelé une fonction Dans JavaScript, comment puis-je rediriger une réponse Ajax dans l'emplacement de la fenêtre Comment augmenter la vitesse de chargement audio en utilisant JavaScript? Appelez la fonction asynchrone récursivement Outil shell qui rend le site Web incluant javascript Les scripts peuvent-ils être insérés avec innerHTML?

Comment exécuter le code après Knockout JS a mis à jour le DOM

Dans le cadre de mon point de vue, j'ai: 

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

Je souhaite exécuter un code tiers, une fois que knock-out a mis à jour le DOM. 

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

Une idée sur la façon dont je peux me connecter au knock-out pour appeler cela au bon moment?

L'utilisation de la liaison afterRender peut vous aider. 

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

Une façon précise est d'utiliser le fait que KnockoutJS applique les liaisons séquentiellement (car elles sont présentées en html). Vous devez définir un élément virtuel après l'élément 'foreach-bound' et définir une liaison 'text' qui appelle votre fonction tierce.

Voici html: 

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

Voici le 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); }