LemonadeJS methods

Summary

The following table lists the native LemonadeJS methods.

Method	Description
Core functions
element(string, object, object)	It will create the DOM elements based on an HTML template and bind the scope with the self object. `lemonade.element(template: String, self: Object, components: Object) => DOMElement`
render(DOMElement, DOMElement, object?)	It will append the newly created LemonadeJS DOM elements to a root given. `lemonade.render(component: Function, root: HTMLElement, self?: object) => DOMElement`
apply(DOMElement, object, object)	Bind the self scope to an existing DOMElement already in the DOM. `lemonade.apply(root: HTMLElement, self: Object, components: Object) => void`
setComponents(object)	Add component references to be used across the whole application. `lemonade.setComponents(components: object) => void`
Sugar functions
set(string, self, persistence)	Make the self or a data dispatcher available in the Sugar common container to be used across different components. `lemonade.set(alias: String, self: Object, persistence?: Boolean) => void`
get(string)	Get a self reference from the Sugar common container. `lemonade.get(alias: String) => Object \| Function`
dispatch(string, data)	Call a data dispatcher. `lemonade.dispatch(alias: String, data: Object) => void`

Methods

lemonade.element

The lemonade.element renders a HTML string and bind a self data object its DOM elements.

lemonade.render

The lemonade.render runs a component or class and bind the result to a existing DOM element.

lemonade.apply

The lemonade.apply will be used when you wish to bind a self to an existing appended DOM element. That is useful to apply a self to an existing application without changing the application.

Basic Example

The following examples are basic examples on how to apply a self to an existing DOM root element. Of course this is just an example for education purposes and a better scope encapsulation should be considered.

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

<div id='element'>
    <h1>{{self.title}}</h1>
    <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('element'), self);
</script>
</html>

Control an existing HTML form

The following example binds a self to an HTML form to control the values of the form elements.

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

<form id='myForm'>
    <div class='form-group'>
        <label>Name</label><br>
        <input type='text' name='name' :bind="self.name">
    </div>

    <div class='form-group'>
        <label>Profession</label>
        <input type='text' name='profession' :bind="self.name">
    </div>

    <div class='form-group'>
        <label>Gender</label>
        <select name='gender' :bind="self.gender">
            <option value="1">Male</option>
            <option value="2">Female</option>
        </select>
    </div>

    <div class='form-group'>
        <input type='button' value='Save profile' onClick='self.save()'>
    </div>
</form>

<script>
// Apply the self object to an existing HTML element already in the DOM
let self = {};
self.name = 'John Lennon';
self.profession = 'Musician';
self.gender = 1;
self.save = function() {
    alert('Do something...');
}
lemonade.apply(document.getElementById('myForm'), self);
</script>
</html>

Conclusion

You can use lemonade.render and lemonade.element to create components, or use lemonade.apply to bind a self to a block of HTML code.

Next chapter: Native lemonade JavaScript events