Classes

It is also possible to create reusable LemonadeJS components from JavaScript classes. The most important point when dealing with classes is that the self object is a reference to the this inside 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

Create a basic counter as a JavaScript class.

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

    counter() {
        this.count++;
    }

    render() {
        return `
            <div>{{self.count}}</div>
            <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