Ejecutar Javascript después de que KnockoutJS haya renderizado todos los elementos en una página magento 2

Magento se basa en el framework Knockoutjs en la mayoría de sus integraciones con Javascript. Por ejemplo, todo la integración de formas de envío, pago y datos de usuario del Checkout se basan en Knockout.

Si estamos utilizando la función require([“jquery”, “domReady!”], function($){} o la función jQuery(window).load() , la mayoría de nuestro código Javascript personalizado se ejecuta antes de que se muestre el elemento Knockout.

Cuando estamos desarrollando en Magento 2 funcionalidades javascript es posible que nos interese ejecutar nuestro código después de que los componentes Knockout se hayan renderizado. Para ello Knockout nos ofrece una función que podemos integrar en nuestros componentes llamada afterRender. Esta función se ejecuta después de que se inserte un elemento asociado al DOM.

<div class="ko-concepto">
    <span data-bind="afterRender: loadJsAfterKoRender"></span>
</div>

En nuestro elemento html deberemos agregar un data-bind definiendo afterRender y la función que se llamará tras la finalización completa del renderizado.

loadJsAfterKoRender: función(){
    // Your code execute ko render
}

Agregaremos a nuestro js la función loadJsAfterKoRender en la cual integraremos nuestro código js personalizado.