<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <title>Spine.js • TodoMVC</title> <link rel="stylesheet" href="../../assets/base.css"> <!--[if IE]> <script src="../../assets/ie.js"></script> <![endif]--> </head> <body> <section id="todoapp"> <header id="header"> <h1>Todos</h1> <input id="new-todo" placeholder="What needs to be done?"> </header> <section id="main"> <input id="toggle-all" type="checkbox"> <label for="toggle-all">Mark all as complete</label> <ul id="todo-list"></ul> </section> <footer id="footer"> <span id="todo-count"><strong>1</strong> item left</span> <ul id="filters"> <li> <a class="selected" href="#/">All</a> </li> <li> <a href="#/active">Active</a> </li> <li> <a href="#/completed">Completed</a> </li> </ul> <button id="clear-completed">Clear completed</button> </footer> </section> <footer id="info"> <p>Double-click to edit a todo</p> <!-- delete this ↓ --> <p>Inspired by the official <a href="https://github.com/maccman/spine.todos">Spine.Todos</a></p> <!-- change this out with your name and url ↓ --> <p>Created by <a href="http://github.com/sindresorhus">Sindre Sorhus</a></p> </footer> <script type="text/x-handlebars-template" id="todo-template"> {{#this}} <li {{#if completed}}class="completed"{{/if}}> <div class="view"> <input class="toggle" type="checkbox" {{#if completed}}checked{{/if}}> <label>{{title}}</label> <button class="destroy"></button> </div> <input class="edit" value="{{title}}"> </li> {{/this}} </script> <script src="../../assets/base.js"></script> <script src="../../assets/jquery.min.js"></script> <script src="../../assets/handlebars.min.js"></script> <script src="js/lib/spine.min.js"></script> <script src="js/lib/route.min.js"></script> <script src="js/lib/local.js"></script> <script src="js/controllers/todos.js"></script> <script src="js/models/todo.js"></script> <script src="js/app.js"></script> </body> </html>