
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 the@ref
, @bind
, @loop
and @ready
. In this section we will go
through each of them with examples.Summary of this chapter
Each of the four special LemonadeJS attributes starts with @ and can be included any HTML tags, such as:
@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 is a method which will be executed when the element is ready and appended to the DOM.
<div @ready="self.ready(this)"></div>
@loop is a attribute used in custom lemonadeJS components to render a HTML based on an array of objects.
<List @loop="self.myArray" />
Alternative Syntax
Alternatively, you can use the following properties
lm-ref
, lm-bind
, lm-loop
and lm-ready
for the same purpose.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/v2/lemonade.js"></script> <div id='root'></div> <script> var Reference = (function() { var self = {}; self.update = function() { self.text.style.color = 'red'; } var template = `<> <input value='Any text' @ref='self.text' /> <input type='button' onclick='self.update()'value='Update' /> </>`; return lemonade.element(template, self); }); lemonade.render(Reference, document.getElementById('root')); </script> </html>
See this example on codesandbox
Tracking changes with @bind
The@bind
helps to link a self
property to the HTML element value. Thus helping to keep the synchronization the desired property and the component value.<html> <script src="https://lemonadejs.net/v2/lemonade.js"></script> <div id='root'></div> <script> var Tracking = (function() { var self = {}; // Default value for this property = default value for the dropdown self.name = 'Ringo'; var template = `<> <span>{{self.name}}</span><br/><br/> <select @bind='self.name'> <option>John</option> <option>Paul</option> <option>George</option> <option>Ringo</option> </select> </>`; return lemonade.element(template, self); }); lemonade.render(Tracking, 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 into the DOM.<html> <script src="https://lemonadejs.net/v2/lemonade.js"></script> <div id='root'></div> <script> var Ready = (function() { var self = {}; // Execute the method when the element is mount self.getWidth = function(element) { self.width = element.offsetWidth; } var template = `<> <input @ready='self.getWidth(this)'/> <i>The input width is: {{self.width}}</i> </>`; return lemonade.element(template, self); }); lemonade.render(Ready, document.getElementById('root')); </script> </html>
See this example on codesandbox
Component lists 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/v2/lemonade.js"></script> <div id='root'></div> <script> var Mylist = (function() { // Create one self for each interaction in the array var self = this; // Template var template = `<li> <b>{{self.title}}</b><br> <i>{{self.description}}</i> </li>`; return lemonade.element(template, self); }); var Loop = (function() { var self = {}; self.rows = [ { title:'Google', description: 'The alpha search engine...' }, { title:'Bind', description: 'The microsoft search engine...' }, ]; // @loop only can be used in custom elements var template = `<ul><Mylist @loop="self.rows" /></ul>`; return lemonade.element(template, self, { Mylist }); }); lemonade.render(Loop, document.getElementById('root')); </script> </html>
See this example on codesandbox
Next chapter
We will explore each of those LemonadeJS attributes in the next few chapters. In the next one, we will give focus on the @bind and the HTML form element two-way binding.Next chapter: Two way binding