gistfile1.coffee

import List

Task : { done: Boolean, id: Int, name: String }
Tasks : { name: String, tasks: List Task }
TasksList : List Tasks

Component "tasks-page" {
  attrs: {tasks: Tasks}
  state: {newTask: ""}

  actions: {
    remove id = List.remove @tasks id

    newTask = 
      let task = { name: @newTask
                 , id: Random(0,1000000)
                 , done: false
                 }
      in
        push @tasks task << 
        set @newTask ""
  }

  template =
    .task-page
      textbox(enter: :newTask, sync: @newTask) 

      .tasks
        .task(
          repeat<task>: @tasks
          class<complete>: task.done
        )
          textbox(sync: task.name)
          checkbox(sync: task.complete)

          a.delete(if: task.done, click: :remove task.id) delete
}

App {
  state: {
    activeList: Maybe TaskList
    lists: TasksLists
    newListName: String
  }

  actions: {
    newList = 
      let list = { name: @newListName
                 , list: []
                 }
      in
        push @lists list << 
        set @newListName ""

  }

  defaultState: {
    activeList: Nothing
    lists: []
    newListName: ""
  }

  template =
    h1 Tasks

    textbox.new-list(
      sync: @newListName
      onEnter: :newList
    )
    ul.tasks-list.left
      li(
        repeat<list>: @lists
        class<active>: eq list @activeList
      )
        .name {list.name}
        .count {length list.tasks}

    tasks-page.right(
      if: @activeList
      tasks: @activeList
    )

    .choose-one.right(if: not @activeList)
      h1 Choose a list!
}