
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
Note that :
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" />
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