Learn to create a simple Todo App with Metal.js and Soy

Rendering Data

First, let's prepare the TodoItem for consuming the data passed fromTodoApp:

{namespace TodoItem}

/**
 * This renders the component's whole content.
 */
{template .render}
    {@param todo: ?}

    {let $elementClasses kind="text"}
        todo-item
        // Conditionally adding the 'todo-item-done' class if
        // the todo is done
        {if $todo.done}
            {sp}todo-item-done
        {/if}
    {/let}

    <li
        class="{$elementClasses}"
    >
        {$todo.title}
    </li>
&#123;/template&#125;

Now that you have some data that needs rendering and the TodoItem is ready to consume it, you need to iterate over the todos and pass them to the child components:

&#123;namespace TodoApp&#125;

/**
 * This renders the component's whole content.
 */
&#123;template .render&#125;
    {@param? todos: ?}

    <div class="todo-app">
        <ul>
            {foreach $todo in $todos}
                {call TodoItem.render}
                    {param index: index($todo) /}
                    {param todo: $todo /}
                {/call}
            {/foreach}
        </ul>
    </div>
&#123;/template&#125;

This results in the following markup:

<div class="todo-app">
    <ul>
        <li class="todo-item">Todo 1</li>
        <li class="todo-item">Todo 2</li>
    </ul>
</div>
I rendered the todo items