Demo of wOOOt api

demo.wooot.coffee

Todos =
  # public properties
  list: OOO.observableArray([])

  # public methods
  counter: OOO.computed ()->
    @list.length + " remaining todos"
  clear: ()->
    @list.remove (_)-> _.done


Todo = (title, done = false) ->
  isEditing = OOO.observable false

  # public properties
  title: OOO.observable title
  done: OOO.observable done

  # public mehods
  remove: ()->
    Todos.remove this
  toggleEdit: ()->
    isEditing !isEditing()


Form =
  # public properties
  title: OOO.observable("")

  # public methods
  add: ()->
    Todos.push Todo @title()


# Main template
MainView = OOO.view (Todos = [], Form)->
  @div "#wrapper", ->

    @form "#add", submit: Form.add, ->
      @input "[type=text]", value: Form.title

    @ul ".todos", each: Todos.list, (todo)->
      TodoView todo

    @p ".status", ->
      @text text: Todos.counter
      @button ".clear", click: Todos.clear ,-> "Clear done"


# Todo Item template
TodoView = OOO.view (todo)->
  @li class: {done: todo.done}, ->
    @label ->
      @input "[type=checkbox]", checked: todo.done
      @text text: todo.title
    @button click: todo.remove, -> "Delete"


$ ()->
  Todos.list.reset [Todo("Buy milk"), Todo("Forget about milk")]

  todoTpl(Todos, Form).appendTo document.body