Products

Lamp

LemonadeJS supports dynamic property strings to automatically update the UI when a property changes.

A working example

<html>
<script src="https://lemonadejs.com/v5/lemonade.js"></script>
<div id='root'></div>
<script>
function Lamp() {
    this.value = 'on'

    return render => render`<div>
        <img src="https://lemonadejs.com/templates/default/img/example-lamp-{{this.value}}.jpg">
        <br/>
        <input type="button" onclick="${() => this.value = 'on'}" value="Light on" />
        <input type="button" onclick="${() => this.value = 'off'}" value="Light off" />
    </div>`;
}
lemonade.render(Lamp, document.getElementById('root'));
</script>
</html>
export default function Lamp() {
    this.value = 'on'

    return render => render`<div>
        <img src="https://lemonadejs.com/templates/default/img/example-lamp-{{this.value}}.jpg">
        <br/>
        <input type="button" onclick="${() => this.value = 'on'}" value="Light on" />
        <input type="button" onclick="${() => this.value = 'off'}" value="Light off" />
    </div>`;
}

See this example on codesandbox