LemonadeJS - Two-way binding JS library

State variable example with lemonadejs.

by Spreadsheet Online

HTML

<script src="https://lemonadejs.net/v1/lemonade.js"></script>
<div id='root'></div>
<script>
var lamp = (function(container) {
    var self = {};
    self.imageElement = null;
    self.lampState = 0;
 
    self.setLampState = function(state) {
        if (! state) {
            self.imageElement.src = "https://lemonadejs.net/templates/v1/img/example-lamp-off.jpg";
        } else {
            self.imageElement.src = "https://lemonadejs.net/templates/v1/img/example-lamp-on.jpg";
        }
    }
 
    var template = `<div>
        <div id="lamp-container">
            <img @ref="self.imageElement" src="https://lemonadejs.net/templates/v1/img/example-lamp-off.jpg" alt="lamp">
        </div>
        <div class="lamp-buttons">
            <button onclick="self.setLampState(1)">Light on</button>
            <button onclick="self.setLampState(0)">Light off</button>
        </div>
    </div>`
 
    lemonade.blender(template,self,document.getElementById('root'));
});
 
lamp(document.getElementById('root'));
</script>