Arrays
The new LemonadeJS brings a new attribute
@loop
to handle array of objects.
Summary of this chapter
- @loop on real HTML tags: The innerHTML would be removed and considered a HTML template.
- A self per entry: A new self will be create and associate to each entry of the array.
- Special self properties: For each self created two special properties will be added automatically
parent
and el
.
- Naming: Custom element's name should always have a first capital letter follow by all lowercase letters.
- Root element: The tag with @loop should be added to a empty tag. <div><Component @loop="self.data" /></div>
Examples
@loop on real HTML tags
When using the
@loop
on a native HTML tag, the innerHTML of the tag will be considered the template to create the elements.
<html>
<script src="https://lemonadejs.net/v2/lemonade.js"></script>
<div id='root'></div>
<script>
const Cryto = function() {
let self = {};
self.data = [
{ title: 'BTC' },
{ title: 'ETH' },
{ title: 'LTC' },
];
// The ul.innerHTML in the following template will be
// used as the template for each item of the array.
let template = `<ul @loop="self.data">
<li>{{self.title}}</li>
</ul>`;
return lemonade.element(template, self);
}
lemonade.render(Cryto, document.getElementById('root'));
</script>
@loop on custom HTML tags
Custom components allows controls and behavior to be bound to each element in the array. In the follow example, the template is defined in the parent.
<html>
<script src="https://lemonadejs.net/v2/lemonade.js"></script>
<div id='root'></div>
<script>
/**
* This method is called one time for each entry in the array
*/
const List = function(template) {
// "this" is a reference for each entry in the array.
let self = this;
// Template defined inside the parent
return lemonade.element(template, self);
}
const Component = function() {
let self = {};
self.data = [
{ title: 'BTC' },
{ title: 'ETH' },
{ title: 'LTC' },
];
// The template for the List is defined inside the parent. Which means
// the self of the template would be related to each position in the array.
let template = `<ul>
<List @loop="self.data">
<li>{{self.title}}</li>
</List>
</ul>`;
return lemonade.element(template, self, { List });
}
lemonade.render(Component, document.getElementById('root'));
</script>
Custom components with @loop and controls
The next example, brings the template inside the custom controller, and includes custom function to add and delete items in the array.
const Component = function() {
let self = {};
self.data = [
{ title: 'BTC' },
{ title: 'ETH' },
{ title: 'LTC' },
];
self.add = function() {
self.data.push({ title: self.text });
// Update the view
self.refresh('data');
// Reset label
self.text = '';
}
self.del = function(s) {
self.data.splice(self.data.indexOf(s), 1);
// Update the view
self.refresh('data');
}
let template = `<>
<ul @loop="self.data">
<li>
<i>{{self.title}}</i>
<span onclick="self.parent.del(self)"
style="cursor: pointer;">x</span>
</li>
</ul>
<input type="text" @bind="self.text" />
<input type="button" value="Add" onclick="self.add()" />
</>`;
return lemonade.element(template, self);
}
lemonade.render(Component, document.getElementById('root'));
Related examples
Related libraries