03: Controller with State
Implement controller to root element of app.
Nothing happens.
- Add x-ninja library by <script> tags.
- Add x-controller and activator (_) in open tag of root element.
- Add x-state as flux store data in x-controller tag.
<!DOCTYPE html> <html lang="en"> <head><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> <body> <section class="todoapp" x-state="{ }" x-controller _><meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1" ><header class="header">
<h1>todos</h1> <input class="new-todo" autofocus autocomplete="off" placeholder="What needs to be done?" > </header><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"> <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><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>