Ready

Overview

The ready special attribute in Lemonade allows you to bind a function to a DOM element. This function will be triggered when the element is fully initialized and appended to the DOM.

Here is an example of using the ready attribute to modify a DOM element after it has been rendered:

Examples

<script src="https://lemonadejs.com/v5/lemonade.js"></script>
<div id='root'></div>
<script>
function Component() {
    const ready = (element) => {
        element.textContent = 'Hello World';
    }
    // Call the ready method when the DOM element is ready and appended to the DOM
    return render => render`<div>
        <b :ready="${ready}"></b>
    </div>`;
}
lemonade.render(Component, document.getElementById('root'));
</script>
</html>

import { state } from 'lemonadejs';

export default function Component() {
    const ready = (element) => {
        element.textContent = 'Hello World';
    }
    // Call the ready method when the DOM element is ready and appended to the DOM
    return render => render`<div>
        <b :ready="${ready}"></b>
    </div>`;
}

Related Content

For executing code after the entire template is rendered and appended to the DOM, consider using the global onload event. More about the onload event

What's Next?

Learn more about LemonadeJS's two-way data binding in the next section.

Two way data binding