05: Hydrate Todo Items
Hydrate todos to each child element of x-each element.
- Add todo variable name into x-each directive for hydrating each todo item.
- Add class binding directive to apply CSS class of completed item design to the todo item.
- Hydrate completed state of todo item to HTML template with x-model directive.
- Hydrate title of todo item to HTML template with mustache syntax.
<body><!DOCTYPE html>
<html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1" > <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/todomvc-app-css@2.1.2/index.css" > <script src="https://x-ninja.org/assets/js/o_o.js"></script> <script src="https://x-ninja.org/assets/js/flux._.js"></script> <title>TODOs @x-ninja</title> </head><section class="todoapp"
x-state="{ todos: [ { title: 'Todo Title (Active)', completed: false }, { title: 'Todo Title (Completed)', completed: true }, ], }" x-controller _><section class="main"><header class="header">
<h1>todos</h1> <input class="new-todo" autofocus autocomplete="off" placeholder="What needs to be done?" > </header><ul class="todo-list" x-each="todo in todos" > <li class="todo" x-bind:class="{ completed: todo.completed, }" > <div class="view"> <input class="toggle" type="checkbox"> <input class="toggle" type="checkbox" x-model="todo.completed" > <label>Todo Title (Active)</label> <label>{{ todo.title }}</label> <button class="destroy"></button> </div> <input class="edit"> </li> </ul> </section><input id="toggle-all" class="toggle-all" type="checkbox">
<label for="toggle-all">Mark all as complete</label></section> </body> </html><footer class="footer">
<span class="todo-count"> <strong>3</strong> items left </span> <ul class="filters"> <li><a href="#/all" class="selected">All</a></li> <li><a href="#/active">Active</a></li> <li><a href="#/completed">Completed</a></li> </ul> <button class="clear-completed"> Clear completed </button> </footer>