LemonadeJS Events

The following table shows the native LemonadeJS events.
Event Description
onload(component: DOMElement)It happens when the component is mounted and ready in the DOM.
self.onload(component: DOMElement) => void
onchange(property, affectedElements)It happens when the value of a self property in observation is updated.
self.onchange(property: string, affected: object) => void
@param property - self property that triggered the event.
@param affectedElements - When the same property is bound to different HTML elements.


There is a call to the method self.onchange when the value of a self property in observation changes. A self property is automatically added to the list of observable properties when this self property is included in the DOM.


<script src="https://lemonadejs.net/v2/lemonade.js"></script>
<div id='root'></div>
var Component = (function() {
    // Create the self object
    var self = {};
    self.onchange = function(property) {
        // It will be called when counter is updated
        alert('The self property: ' + property + ' is updated');
    // Create the property
    self.counter = 1;
    // The property call is added to the observable list when added to the DOM
    var template = `<>
        <input type="button" value="Counter+1" onclick="self.counter++;"/>
    // Render the template and create the observation
    return lemonade.element(template, self);
// Render the LemonadeJS element into the DOM
lemonade.render(Component, document.getElementById('root'));

See this example on codesandbox