Classes

It is also possible to create reusable LemonadeJS components as JavaScript classes. Remember that {self} is a reference to {this} in any LemonadeJS classes. 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 seen in the example below.

<html>
<script src="https://lemonadejs.net/v3/lemonade.js"></script>
<div id='root'></div>
<script>
class Counter extends lemonade.component {
    constructor(self) {
        super(self);
        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.





Next Chapter

The next Chapter presents how to create a reactive Webcomponents using LemonadeJS.

Next chapter: Webcomponents