All you need to know in a single page.
What it is?
A LemonadeJS Pico component implements common application requirements and should have a limit of 1.8 KBytes and zero dependencies. That is a challenge that promotes highly optimized solutions for modern applications. The official pico components are:
- List: (1.5 KBytes): helps to convert an array of objects in a list of objects, with search and pagination.
- Rating: (1.5 KBytes): reactive star rating implementation
- Router: (1.8 KBytes): render your components based on routes. Very useful to create single page applications.
The self object
Special self attributes
el: a reference to the root element of each component. Only available when the component is ready.
parent: when a component is called from another component. This property contains the self object of the caller.
refresh: trigger the changes from a self property to the view. It is used to refresh the view when a array is changed or to refresh a whole component.
There are four special properties in LemonadeJS, those are:
@ready:call a method as soon the element is ready on the DOM.
@loop:It receives an array in a custom element. It will call the custom element for each position in the array.
There are three main methods to help to create the LemonadeJS components as below:
lemonade.apply(DOMElement, self, components)bind a new self to an existing elements in the DOM.
lemonade.element(template, self, components)create a new HTML element from a template and make the self available in the template.
lemonade.render(DOMElement, DOMElement)append a LemonadeJS element to an existing DOM element available.
There are two native events that can be create within the
self as follow:
self.onload(component)It happens when the component is ready and mounted.
self.onchange(property, affected)It happens when a property of the self is changed.
The event object