Skip to content

Instantly share code, notes, and snippets.

@Warry Warry/
Last active Dec 22, 2015

What would you like to do?
Demo of wOOOt api
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
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.