callback succès après knockout.js finit de rendre tous les éléments

J’ai implémenté une liaison foreach avec plusieurs modèles dans la même page, un exemple est donné ici, ce qui m’intéresse, c’est de savoir quand un bloc a fini de rendre, j’ai essayé afterRender et afterAdd , mais je suppose que ça fonctionne pour chaque élément, et non après la fin de la boucle.

  

Je suis intéressé à trouver juste le rappel de succès, quand une boucle termine le rendu.

voici ma fonction afterAdd , qui attache fondamentalement des événements jQuery, et rien de plus.

 myPostProcessingLogic = function(elements) { $(function(){ $(".list_container_callog").hover(function(){ $(".callsms_container", this).stop().animate({left:"0px"},{queue:false,duration:800}); }, function() { $(".callsms_container", this).stop().animate({left:"-98%"},{queue:false,duration:800}); }); }); } 

merci d’avance, et dites-moi qu’il y a un rappel de succès 🙂

Vous avez le callback afterRender dans knockout.js :

 foreach: { data: myItems, afterRender: renderedHandler } 

Voici la documentation.

À l’intérieur de votre gestionnaire, vérifiez si la longueur de la collection rendue est égale à la longueur de la collection d’éléments. Sinon, n’exécutez pas la logique complète que vous avez l’intention d’utiliser.

 renderedHandler: function (elements, data) { if ($('#containerId').children().length === this.myItems().length) { // Only now execute handler } } 

Essayez d’envelopper le ul avec

 

Cela ne fonctionnera que la première fois que tout le contenu du modèle sera rendu. Mais vous ne recevrez qu’un seul appel à myPostProcessingLogic. Voici un violon

 

Il suffit d’envelopper le foreach dans une autre boucle foreach en utilisant la méthode du conteneur moins de Knockout comme ceci:

    

La solution ci-dessus fonctionne très bien. De plus, si vous devez utiliser l’option “as” de foreach, vous pouvez le faire comme suit:

 data-bind="foreach: { data: myItems, afterRender: renderedHandlet, as: 'myItem'}"> 

La réponse ci-dessus de Chuck Schneider est la meilleure. J’ai dû utiliser le contrôle sans conteneur car le foreach est sur un élément tbody:

          

Je viens juste de faire une requête de retrait avec knock-out pour qu’ils ajoutent deux événements à définir dans la liaison, déballent, puis appellent aux bons endroits avant de rendre les éléments et après que tous les éléments aient été rendus. Je n’ai rien entendu de leur part mais cela fait exactement ce que vous voulez faire, mais vous n’avez pas besoin d’écrire du code pirate pour le faire fonctionner. Je suis surpris que personne n’ait fait cette demande auparavant. J’ai utilisé ces rappels que j’ai ajoutés à la source pour détruire et réinitialiser un fichier jquery datatable lié. C’était la solution la plus simple. J’ai vu de nombreuses tentatives en ligne qui tentent de le faire différemment, mais c’est la solution la plus simple.

Demande de tirage: -> pr 1856

 ko.bindingHandlers.DataTablesForEach = { init: function(element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) { var nodes = Array.prototype.slice.call(element.childNodes, 0); ko.utils.arrayForEach(nodes, function(node) { if (node && node.nodeType !== 1) { node.parentNode.removeChild(node); } }); return ko.bindingHandlers.foreach.init(element, valueAccessor, allBindingsAccessor, viewModel, bindingContext); }, update: function(element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) { var value = ko.unwrap(valueAccessor()), key = "DataTablesForEach_Initialized"; var newValue = function() { return { data: value.data || value, beforeRenderAll: function(el, index, data) { if (ko.utils.domData.get(element, key)) { $(element).closest('table').DataTable().destroy(); } }, afterRenderAll: function(el, index, data) { $(element).closest('table').DataTable(value.options); } }; }; ko.bindingHandlers.foreach.update(element, newValue, allBindingsAccessor, viewModel, bindingContext); //if we have not previously marked this as initialized and there is currently items in the array, then cache on the element that it has been initialized if (!ko.utils.domData.get(element, key) && (value.data || value.length)) { ko.utils.domData.set(element, key, true); } return { controlsDescendantBindings: true }; } }; 

Knockout Datatables JSFiddle

Essayez le callback afterRenderAll dans knockout.js:

foreach: {data: myItems, afterRenderAll: myPostProcessingLogic}