Awesome examples

A summary of nice examples using LemonadeJS.

Micro reactive components

Here is a interesting working examples worth sharing.

Creating dynamic tables

<html>
<script src="https://lemonadejs.net/lemonade.js"></script>
<div id='root'></div>
<script>
function Component() {
    const self = this;

    self.rows = [
        { title:'Google', description: 'The alpha search engine...' },
        { title:'Bind', description: 'The microsoft search engine...' },
        { title:'Duckduckgo', description: 'Privacy in the first place...' },
    ];

    // Custom components such as List should always be unique inside a real tag.
    return `<table cellpadding="6">
        <thead>
            <tr><th>Title</th><th>Description</th></tr>
        </thead>
        <tbody :loop="self.rows">
            <tr><td>{{self.title}}</td><td>{{self.description}}</td></tr>
        </tbody>
    </table>`;
}
lemonade.render(Component, document.getElementById('root'));
</script>
</html>

Reactive web-components

<hello-element title="Hello world" />

<script>
class HelloElement extends HTMLElement {
    constructor() {
        super();
    }

    render() {
        const self = this;
        return `<>
            <h1>{{self.title}}</h1>
            <input type="button" value="setTitle()"
                onclick="self.title = 'Test'" />
        </>`;
    }

    connectedCallback() {
        lemonade.render(this.render, this, this);
    }
}

window.customElements.define('hello-element', HelloElement);
</script>

Creating a dynamic dropdown from a JS array

<html>
<script src="https://lemonadejs.net/lemonade.js"></script>
<div id='root'></div>
<script>
function Component() {
    const self = this;
    this.value = 2;
    this.options = [
        { id: 1, name: "Canada" },
        { id: 2, name: "United Kingdom" },
        { id: 3, name: "United States" },
        { id: 4, name: "New Zealand" },
        { id: 5, name: "Australia" }
    ]

    return `<>
        <select :loop='self.options' :bind='self.value'>
        <option value='{{self.id}}'>{{self.name}}</option>
        </select>
        <div>The value is: {{self.value}}</div>
    </>`;
}
lemonade.render(Component, document.getElementById('root'));
</script>
</html>

Control the disable of a form element

<html>
<script src="https://lemonadejs.net/lemonade.js"></script>
<div id='root'></div>
<script>
function Component() {
  const self = this;
  self.disabled = true;
  return `<>
        <input type="text" disabled="{{self.disabled}}" value="test..." /><br>
        <button onclick="self.disabled = false">Enable</button>
        <button onclick="self.disabled = true">Disable</button>
    </>`;
}
lemonade.render(Component, document.getElementById('root'));
</script>
</html>