Apply

The lemonade.apply method binds a JavaScript object (self) to an existing HTML element rendered in the DOM. This makes it ideal for introducing reactivity or improving isolated sections or specific parts of an application or website without requiring a complete refactor.

Example

This feature treats the HTML given as a template, creating dynamic bindings between the self object and the DOM to enable reactive updates and event handling.

<div id="template">
    <h1>{{self.title}}</h1>
    <div>
        <input type="button" value="Update title" onclick="self.update" />
    </div>
</div>
<script>
let self = {
    title: 'Hello World',
    update: function() {
        self.title = 'New title';
    }
}
lemonade.apply(document.getElementById('template'), self)
</script>