Documentation keyboard_arrow_right Apply

Apply

The lemonade.apply method binds a JavaScript object (self) to an existing HTML element in the DOM. This makes it ideal for introducing reactivity to 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>