hyperviews/examples/hyperapp/todo/view.html

View template language based targeting hyperscript

<section>
  <!-- Add new todo and toggle all -->
  <form onsubmit=actions.add>
    <input type=text name=text class=form-control
      placeholder="Enter new todo" value={state.input}
      required=required autocomplete=off
      onchange=actions.updateInput>
    <input type=checkbox onchange=actions.toggleAll>
  </form>

  <!-- Todos list -->
  <ul>
    <li each="todo in state.todos" key={todo.id}>
      {$index + 1}.
      <input type=text value={todo.text}
        onchange='e => actions.updateText({id: todo.id, text: this.value})' class=form-control
        style="{ borderColor: todo.text ? '': 'red', textDecoration: todo.done ? 'line-through': '' }">
      <input type=checkbox checked={todo.done}
        onchange='e => actions.toggleDone(todo.id)'>
    </li>
  </ul>

  <!-- Summary -->
  <span>Total {state.todos.length}</span>
  <button if="state.todos.find(t => t.done)" 
    onclick=actions.clearCompleted>
    Clear completed
  </button>

  <!-- Debug -->
  <pre><code>{JSON.stringify(state, null, 2)}</code></pre>
</section>