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. |
Onchange
There is a call to the methodself.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.Example
<html> <script src="https://lemonadejs.net/v2/lemonade.js"></script> <div id='root'></div> <script> 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 = `<> <div>{{self.counter}}</div> <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')); </script> </html>
Example
The event object
From version 2.2.4 you can pass the event object (e) from the template to any event handler, as example below.Example
<html> <script src="https://lemonadejs.net/v2/lemonade.js"></script> <div id='root'></div> <script> var Component = (function() { // Create the self object var self = {}; self.test = function(e) { console.log(e); e.preventDefault(); } // The property call is added to the observable list when added to the DOM var template = `<> <input type="button" value="Click test" onclick="self.test(e);"/> </>`; // 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')); </script> </html>
Example
The event will be shown on the console