simple-todos.html 1.1 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253
  1. <!-- Predefined "head" template -->
  2. <head>
  3. <title>Todo List</title>
  4. </head>
  5. <!-- Predefined "body" template -->
  6. <body>
  7. <div class="container">
  8. <header>
  9. <h1>Todo List ({{incompleteCount}})</h1>
  10. <label class="hide-completed">
  11. <input type="checkbox" checked="{{hideCompleted}}" />
  12. Hide completed tasks
  13. </label>
  14. {{> loginButtons}}
  15. <!-- add a form below the h1 -->
  16. {{#if currentUser}}
  17. <form class="new-task">
  18. <input type="text" name="text" placeholder="Type to add new tasks" />
  19. </form>
  20. {{/if}}
  21. </header>
  22. <ul>
  23. {{#each tasks}}
  24. {{> task}}
  25. {{/each}}
  26. </ul>
  27. </div>
  28. </body>
  29. <!-- Custom "task" template -->
  30. <template name="task">
  31. <li class="{{#if checked}}checked{{/if}} {{#if private}}private{{/if}}">
  32. <button class="delete">&times;</button>
  33. <input type="checkbox" checked="{{checked}}" class="toggle-checked" />
  34. {{#if isOwner}}
  35. <button class="toggle-private">
  36. {{#if private}}
  37. Private
  38. {{else}}
  39. Public
  40. {{/if}}
  41. </button>
  42. {{/if}}
  43. <span class="text"><strong>{{username}}</strong> - {{text}}</span>
  44. </li>
  45. </template>