v2

gistfile1.js

store Tasks {
  @tasks = []
  @undone <- @tasks.filter(task => !task.done)

  makeTask(task) { return { title: title, done: false } }

  addTask(newText) { @tasks.push(makeTask(newText)) }
  clear() { @tasks = @undone }
}

view Task {
  <h2>{^data.title}</h2>
  <input type="checkbox" checked={^data.done} change={^change()}>
}

view Main {
  @newText = ""

  add() { Tasks.addTask(@newText); @newText = "" }

  <h1>Todo List</h1>
  <Task repeat[task]={Tasks.tasks}
        data = {task} 
        change = {bool => task.done = bool} />

  <div.toolbar>
    <div.undone> {Tasks.undone.length} tasks left</div>
    <button click={Tasks.clear()}>clear completed</button>
  </div>

  <input enter={add()} sync={@newText} placeholder="New Task" />
}

store Tasks {
  @tasks = []
  @undone <- @tasks.filter(task => !task.done)

  makeTask(task) { return { title: title, done: false } }

  addTask(newText) { @tasks.push(makeTask(newText)) }
  clear() { @tasks = @undone }
}

view Task {
  <h2>{^title}</h2>
  <input type="checkbox" checked={^done} change={^change}>
}

view Main {
  @newText = ""

  add() { Tasks.addTask(@newText); @newText = "" }

  <h1>Todo List</h1>
  <Task (Task.tasks) change = {bool => task.done = bool} />

  <div.toolbar>
    <div.undone> {Tasks.undone.length} tasks left</div>
    <button click={Tasks.clear()}>clear completed</button>
  </div>

  <input enter={add} sync={@newText} placeholder="New Task" />
}