Star

Classes

It is also possible to create reusable LemonadeJS components as JavaScript classes. The most important point when dealing with classes is that the self object is a reference to the this in the class. Thus, you can update internal attributes or invoke the class methods from the self into the template as in the example below.

Example

It is possible to create lemonade components using JavaScript classes as example below.

<html>
<script src="https://lemonadejs.com/v2/lemonade.js"></script>
<div id='root'></div>
<script>
class Counter extends lemonade.component {
    constructor() {
        super();
        this.count = 1;
    }

    counter() {
        this.count++;
    }

    render() {
        return `
            <>
            <div>Counter: {{self.count}}</div><br>
            <input type='button' onclick="self.counter()" value='Go' />
            <input type='button' onclick="self.count = 0" value='Reset' />
            </>
        `;
    }
}
lemonade.render(Counter, document.getElementById('root'));
</script>
</html>

See this working example on codesandbox.

Edit this page on GitHub