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

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

    return lemonade.element(template, self);
}

const Component = function() {
    let self = {};

    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.
    let template = `<ul><List @loop="self.data" /></ul>`;

    return lemonade.element(template, self, { List });
}

lemonade.render(Component, document.getElementById('root'));