How do I load JavaScript function inside KnockoutJS html?

Question

I am making changes to my Magento 2 cart.

I want to run a particular JavaScript function once the registration.html file is loaded

My file:

/app/design/frontend/mytheme/default/Magento_Checkout/web/template/registration.html

My code:

<div>
 <!-- ko ifnot: accountCreated -->
 <p data-bind="i18n: 'You can track your order status by creating an account.'"></p>
 <p>
 <span data-bind="i18n: 'Email Address'"></span>: <span data-bind="text: getEmailAddress()"></span>
 </p>
 <form method="post" data-bind="submit: createAccount">
 <input type="submit" class="action primary" data-bind="value: $t('Create Account'), disable: creationStarted" />
 </form>
 <!-- /ko -->
 <!-- ko if: accountCreated -->
 <p data-bind="i18n: 'A letter with further instructions will be sent to your email.'"></p>
 <!-- /ko -->
</div>
<script type="text/x-magento-init">
alert('yes');
</script>

I want it so that once that file is loaded via AJAX it runs the alert.. I have tried just using <script> and <script type="text/javascript"> but it is not working. Please can you help?

• Max: Please, describe your problem. I think, that we don't need to observe loading of template file on this abstraction level.
• TheBlackBenzKid: Please can you show me how to write this and what files I need - I want to execute some javascript external function once this file is loaded.. the problem is.. all HTML files load after the dom (bloated Magento!)

Answer 1

If you need to work with DOM elements, rendered by knockout from this template, you can use afterRender binding.

<div data-bind="afterRender: function() {alert('yes');}"></div>

• TheBlackBenzKid: That is fantastic! So if that element is pulled via AJAX it will automatically fire. That is pretty nice.
• Jonathan Marzullo: Thx for the answer! For anyone that needs it, here is the link to the Magento 2 KnockoutJS bindings DevDocs: devdocs.magento.com/guides/v2.2/ui_comp_guide/concepts/…