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