Classes
It is also possible to create reusable LemonadeJS components as JavaScript classes. The most important point when dealing with classes is that theself
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.<html> <script src="https://lemonadejs.net/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> <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>
Example
See this working example on codesandbox.