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>

Example



@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>

Example



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'));

Example


Related examples


Related libraries