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.
<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.