List

It is possible bind a template multiple times using the directive :loop, creating lists.

Basic example

A basic example to render an array of objects.

Source code

<html>
<script src="https://lemonadejs.net/v4/lemonade.js"></script>
<div id='root'></div>

<script>
function List() {
    // Create one self for each interaction in the array
    const self = this;
    // Template
    return `<li>
        <b>{{self.title}}</b><br>
        <i>{{self.description}}</i>
    </li>`;
}

function Component() {
    const self = this;

    self.data = [
        { title:'Google', description: 'The alpha search engine...' },
        { title:'Bind', description: 'The microsoft search engine...' },
        { title:'Yahoo', description: 'The old stuff...' },
    ];

    // Custom components such as List should always be unique inside a real tag.
    return `<ul><List :loop="self.data" /></ul>`;
}
// Register tag
lemonade.setComponents({ List });
// Render component
lemonade.render(Component, document.getElementById('root'));
</script>
</html>

import lemonade from 'lemonadejs';

function List() {
    // Create one self for each interaction in the array
    const self = this;
    // Template
    return `<li>
        <b>{{self.title}}</b><br>
        <i>{{self.description}}</i>
    </li>`;
}

function Component() {
    const self = this;

    self.data = [
        { title:'Google', description: 'The alpha search engine...' },
        { title:'Bind', description: 'The microsoft search engine...' },
        { title:'Yahoo', description: 'The old stuff...' },
    ];

    // Custom components such as List should always be unique inside a real tag.
    return `<ul><List :loop="self.data" /></ul>`;
}
// Register tag
lemonade.setComponents({ List });
// Render component
lemonade.render(Component, document.getElementById('root'));

Edit this page on GitHub