index.html 3.3 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title>Todo</title>
  5. <meta charset="utf-8">
  6. <link rel="stylesheet" type="text/css" href="todomvc.css">
  7. <link rel="stylesheet" type="text/css" href="custom.css">
  8. </head>
  9. <body>
  10. <section id="todoapp" sd-controller="Todos" sd-class="filter">
  11. <header id="header">
  12. <h1>todos</h1>
  13. <!-- main input box -->
  14. <input
  15. id="new-todo"
  16. autofocus
  17. sd-on="keyup:addTodo | key enter"
  18. placeholder="What needs to be done?"
  19. >
  20. </header>
  21. <section id="main" sd-show="total">
  22. <!-- toggle all checkbox-->
  23. <input
  24. id="toggle-all"
  25. type="checkbox"
  26. sd-checked-oneway="allDone"
  27. sd-on="change:toggleAll"
  28. >
  29. <ul id="todo-list">
  30. <!-- a single todo item -->
  31. <li
  32. sd-each="todo:todos"
  33. sd-class="completed:todo.done, editing:todo.editing"
  34. >
  35. <div class="view">
  36. <input
  37. class="toggle"
  38. type="checkbox"
  39. sd-checked="todo.done"
  40. sd-on="change:updateCount"
  41. >
  42. <label
  43. sd-text="todo.text"
  44. sd-on="dblclick:edit"
  45. ></label>
  46. <button class="destroy" sd-on="click:removeTodo"></button>
  47. </div>
  48. <input
  49. class="edit"
  50. type="text"
  51. sd-focus="todo.editing"
  52. sd-on="blur:stopEdit, keyup:stopEdit | key enter"
  53. sd-value="todo.text"
  54. >
  55. </li>
  56. </ul>
  57. </section>
  58. <!-- footer controls -->
  59. <footer id="footer" sd-show="total">
  60. <span id="todo-count">
  61. <strong>{{remaining}}</strong> {{itemLabel}} left
  62. </span>
  63. <ul id="filters">
  64. <li><a href="#/all" data-filter="all" sd-on="click:setFilter">All</a></li>
  65. <li><a href="#/active" data-filter="active" sd-on="click:setFilter">Active</a></li>
  66. <li><a href="#/completed" data-filter="completed" sd-on="click:setFilter">Completed</a></li>
  67. </ul>
  68. <button id="clear-completed" sd-on="click:removeCompleted">
  69. Remove Completed ({{completed}})
  70. </button>
  71. </footer>
  72. </section>
  73. <!-- info -->
  74. <footer id="info">
  75. <p>Double-click to edit a todo</p>
  76. <p>Powered by <a href="https://github.com/yyx990803/seed">Seed.js</a></p>
  77. <p>Created by <a href="http://evanyou.me">Evan You</a></p>
  78. </footer>
  79. <!-- js -->
  80. <script src="../../dist/seed.js"></script>
  81. <script src="app.js"></script>
  82. </body>
  83. </html>