LemonadeJS methods

Summary

In this section, we delve into LemonadeJS' core and sugar methods, which are pivotal for component creation and inter-component communication.

Core functions

The core methods are instrumental in crafting, declaring, and presenting elements within the DOM.

Method Description
element(string, object, object) Generates DOM elements from an HTML string and binds them to a self object. Syntax: lemonade.element(template: String, self: Object, components: Object) => DOMElement
render(DOMElement, DOMElement, object?) Attaches LemonadeJS components to a specified DOM root. Syntax: lemonade.render(component: Function, root: HTMLElement, self?: object, template?: HTMLElement) => DOMElement
apply(DOMElement, object, object) Associates a 'self' scope with an existing DOM element. Syntax: lemonade.apply(root: HTMLElement, self: Object, components: Object) => void
setComponents(object) Includes component references for global application use. Syntax: lemonade.setComponents(components: object) => void

Sugar functions

The sugar methods facilitate seamless communication across various components. These methods provide the foundation and communication channels necessary for creating dynamic and interactive web components with LemonadeJS.

Method Description
set(string, self, persistence) Shares a 'self' or a data dispatcher within the Sugar common container for component-wide access. Syntax: lemonade.set(alias: String, self: Object, persistence?: Boolean) => void
get(string) Retrieves a 'self' reference from the Sugar container. Syntax: `lemonade.get(alias: String) => Object
dispatch(string, data) Initiates a data dispatcher. Syntax: lemonade.dispatch(alias: String, data: Object) => void

Examples

Lemonade apply to existing HTML

This example demonstrates how to integrate LemonadeJS into an existing HTML structure by binding a 'self' object to the DOM. If you have a pre-existing block of HTML you'd like to manage with LemonadeJS, you can apply a 'self' object to it. The following example shows how to bind a simple 'self' to a DOM element. That is a basic illustration intended for educational purposes, and it's recommended that more sophisticated scope encapsulation be implemented in production.

<html>
<script src="https://lemonadejs.net/v4/lemonade.js"></script>

<div id='root'>
    <p><strong>{{self.title}}</strong></p>
    <input type="button" value="Update"
        onclick="self.title = 'New title'" />
</div>

<script>
// Apply the self object to an existing HTML element already in the DOM
let self = {};
self.title = 'Hello world';
lemonade.apply(document.getElementById('root'), self);
</script>
</html>

Creating a component

In the most common applications you can use lemonade.render to render elements to the DOM and lemonade.setComponents to declare components across the application.

 

Next chapter: Native lemonade JavaScript events