All you need to know in a single page.
Pico ExtensionsA 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.
Send you suggestion on our github page or by email firstname.lastname@example.org
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.
AttributesThere 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.
MethodsThere 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.
EventsThere are two native events that can be create within the
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.