04: Flush State

Render each todo item as same format from array of todos in state by x-each directive.

The child nodes of x-each element are displayed repeatedly for the length of the todos array.

  1. Add array of todos into x-state.
  2. Add x-each directive in parent element of todo item HTML tag to be repeated.
  3. Remove todo item sample elements confirmimg the design.

<body>
  <section class="todoapp"
    x-state="{
      todos: [
        {
          title: 'Todo Title (Active)',
          completed: false
        },
        {
          title: 'Todo Title (Completed)',
          completed: true
        },
      ],
    }"
    x-controller
  _>

    <section class="main">
      <input id="toggle-all" class="toggle-all" type="checkbox">
      <label for="toggle-all">Mark all as complete</label>
      <ul class="todo-list"
        x-each="todos"
      >
        <li class="todo">
          <div class="view">
            <input class="toggle" type="checkbox">
            <label>Todo Title (Active)</label>
            <button class="destroy"></button>
          </div>
          <input class="edit">
        </li>
        <li class="todo completed">
          <div class="view">
            <input class="toggle" type="checkbox">
            <label>Todo Title (Completed)</label>
            <button class="destroy"></button>
          </div>
          <input class="edit">
        </li>
        <li class="todo editing">
          <div class="view">
            <input class="toggle" type="checkbox">
            <label>Todo Title (Editing)</label>
            <button class="destroy"></button>
          </div>
          <input class="edit">
        </li>
      </ul>
    </section>

  </section>
</body>
</html>