todos.html

<template>
  <import from="behaviors/focus"></import>

  <header class="header">
    <h1>todos</h1>
    <input class="new-todo" placeholder="What needs to be done?" autofocus
           keyup.delegate="onKeyUp($event)"
           value.bind="newTodoTitle">
  </header>

  <section class="main" show.bind="items.length">
    <input class="toggle-all" type="checkbox" checked.bind="areAllChecked" change.delegate="onToggleAllChanged()">
    <label for="toggle-all">Mark all as complete</label>
    <ul class="todo-list">
      <li repeat.for="todoItem of filteredItems" class="${todoItem.isCompleted ? 'completed' : ''} ${todoItem.isEditing ? 'editing' : ''}">
        <div class="view">
          <input class="toggle" type="checkbox" checked.bind="todoItem.isCompleted">
          <label dblclick.delegate="todoItem.labelDoubleClicked()">${todoItem.title}</label>
          <button click.delegate="$parent.deleteTodo(todoItem)" class="destroy"></button>
        </div>
        <input class="edit"
               value.bind="todoItem.editTitle"
               focus.bind="todoItem.isEditing"
               focusout.delegate="todoItem.finishEditing($event)"
               keyup.delegate="todoItem.onKeyUp($event)">
      </li>
    </ul>
  </section>

  <footer class="footer" show.bind="items.length">
    <span class="todo-count">
      <strong>${countTodosLeft}</strong>
      ${countTodosLeft == 1 ? 'item' : 'items'} left</span>
    <ul class="filters">
      <li>
        <a class="${filter == '!' ? 'selected' : ''}" href="#!/">All</a>
      </li>
      <li>
        <a class="${filter == 'active' ? 'selected' : ''}" href="#/active">Active</a>
      </li>
      <li>
        <a class="${filter == 'completed' ? 'selected' : ''}" href="#/completed">Completed</a>
      </li>
    </ul>
    <button class="clear-completed" click.delegate="clearCompletedTodos()" show.bind="countTodosLeft < items.length">Clear completed</button>
  </footer>
</template>