Two-way data binding examples

The special attributes

LemonadeJS provides special HTML attributes that can be appended to HTML tags to enhance their functionality. There are four native LemonadeJS attributes: :ref, :bind, :loop, :img, and :ready. In this section, we will go through each of these attributes with examples.

Summary of this chapter
Each LemonadeJS attributes starts with : and can be added to an HTML tag as follow:

:ref adds a property to the self object that keeps a reference to the DOM element
<div :ref="self.myDiv"></div>

:bind creates a two-way binding between a tag and the specified self property
<input type="text" :bind="self.name" />

:ready defines a method call when the element is ready and appended to the DOM.
<div :ready="self.ready(this)"></div>

:loop is an attribute that renders an array of objects into the DOM.
<List :loop="self.myArray" />

:src is an attribute that loads dynamic images into an image tag.
<img :src="self.image" />
Note that lm- prefix has been deprecated from version 3.



Special Attributes

Create a reference with :ref

The :ref creates a property in the self as a reference to the element defined in the template.

<html>
<script src="https://lemonadejs.net/lemonade.js"></script>
<div id='root'></div>
<script>
function Reference() {
    const self = this;
    self.update = function() {
        self.text.style.color = 'red';
    }
    return `<>
        <input value='Any text' :ref='self.text' />
        <input type='button' onclick='self.update()'value='Update' />
    </>`;
}
lemonade.render(Reference, document.getElementById('root'));
</script>
</html>

See this example on codesandbox




Two-way data binding with :bind

The :bind implements a synchronization self property to a component or HTML element value.

<html>
<script src="https://lemonadejs.net/lemonade.js"></script>
<div id='root'></div>
<script>
function Two() {
    const self = this;
    // Default value for this property = default value for the dropdown
    self.name = 'Ringo';
    return `<>
        <span>{{self.name}}</span><br/><br/>
        <select :bind='self.name'>
        <option>John</option>
        <option>Paul</option>
        <option>George</option>
        <option>Ringo</option>
        </select>
    </>`;
}
lemonade.render(Two, document.getElementById('root'));
</script>
</html>

See this example on codesandbox




When an element is :ready

The :ready will call the defined method when the element is ready and appended to the DOM.

<html>
<script src="https://lemonadejs.net/lemonade.js"></script>
<div id='root'></div>
<script>
function Ready() {
    const self = this;
    // Execute the method when the element is mount
    self.getWidth = function(element) {
        self.width = element.offsetWidth;
    }
    return `<>
        <input :ready='self.getWidth(this)'/>
        <i>The input width is: {{self.width}}</i>
    </>`;
}
lemonade.render(Ready, document.getElementById('root'));
</script>
</html>

See this example on codesandbox




Render from an array of objects using :loop

The :loop creates a list of elements based on a template from an array of objects.

<html>
<script src="https://lemonadejs.net/lemonade.js"></script>
<div id='root'></div>
<script>
function Loop() {
    const self = this;
    // Options for the loop
    self.rows = [
        {
            title:'Google',
            description: 'The alpha search engine...'
        },
        {
            title:'Bind',
            description: 'The microsoft search engine...'
        },
    ];
    // :loop only can be used in custom elements
    return `<ul :loop="self.rows">
        <li><b>{{self.title}}</b><br/><i>{{self.description}}</i></li>
    </ul>`;
}
// Render the loop component
lemonade.render(Loop, document.getElementById('root'));
</script>
</html>

See this example on codesandbox




Dynamic images with :src

The :src load an image when the DOM is ready.

<html>
<script src="https://lemonadejs.net/lemonade.js"></script>
<div id='root'></div>
<script>
function Image() {
    const self = this;
    // Options for the loop
    self.images = [
        {
            image: 'img/planet-lemonadejs.svg',
        },
        {
            image: 'img/bees.svg',
        },
    ];
    return `<div :loop="self.images">
        <img :src="{{self.image}}" style="width: 80px" />
    </div>`;
}
// Render the component
lemonade.render(Image, document.getElementById('root'));
</script>
</html>

Custom :attributes to pass information as a reference

LemonadeJS v3.2.0+ accepts custom elements to use : to define a property that will receive a value as a reference.


Next Chapter

We will explore each of those LemonadeJS attributes in the following few chapters. In the next one, we will focus on the :bind property and the HTML form element two-way binding.

Next Chapter: Two way binding