The special attributes

The LemonadeJS attributes are special HTML attributes you can append to an HTML tag. There are four native LemonadeJS attributes; they are @ref, @bind, @loop, @img, and @ready. In this section, we will go through each of them with examples.

Summary of this chapter

Each LemonadeJS attributes starts with @ or : and can be added to an HTML tag as follow:

@ref add a property in the self that keeps a reference to the DOM element.
<div @ref="self.myDiv"></div>

@bind is used to create 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 to render an array of objects into the DOM.
<List @loop="self.myArray" />

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


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/v3/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/v3/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/v3/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/v3/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/v3/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>

See this example on codesandbox




Next Chapter

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

Next chapter: Two way binding