Its binding notifies subscriber when an associated element is inserted into the DOM.
Here is the base Magento example for doing these kind of stuffs.
define([
'ko',
'../template/renderer'
], function (ko, renderer) {
'use strict';
ko.bindingHandlers.afterRender = {
/**
* Binding init callback.
*/
init: function (element, valueAccessor, allBindings, viewModel) {
var callback = valueAccessor();
if (typeof callback === 'function') {
callback.call(viewModel, element, viewModel);
}
}
};
renderer.addAttribute('afterRender');
});
Value type: (element: Element, viewModel: Object) => void. Function that is invoked after the element is rendered.
Aliases: [afterRender]
Usage example:
<div afterRender="function (target, viewModel) {
console.log('Rendered element:', target);
console.log('Associated view model:', viewModel);
console.log(this === viewModel);
}"></div>Based on the above example I am doing the changes
defaults: {
template: {
name: 'Magento_Checkout/form/element/email',
afterRender: function (renderedNodesArray, data) {
data.emailHasChanged();
}
}
}Using the "afterRender" method like this may produce unintended results because the DOM elements may not actually be rendered by the time your function is called. You may also experience your function being called multiple times.
You should stick to using the Magento provided "afterRender" template binding by adding it to your html elements like so:
<div afterRender="myFunctionFromViewModel">...</div>
Make changes according to your requirement. If you have any additional questions please feel free to contact us.
