JavaScript SPA Framework: less is more

With that in mind, compare this ‘todo’ application implementation done with Hamlet to your favorite framework:

//- Model: ----------------------------------------
items = Observable []
completeAll = Observable(false)
completeAll.observe (val) ->
items.forEach (i) ->
model =
removeFinished: ->
@finished().forEach items.remove
completeAll: completeAll
hideMarkComplete: -> "hidden" unless @items().length
value: Observable ""
items: items
finished: -> @items.filter (item) -> item.checked()
finishedCount: -> @finished().length
unfinished: ->
@items.filter (item) -> !item.checked()
add: (e) ->
return unless e.keyCode is 13
item =
description: @value()
checked: Observable false
class: -> "completed" if item.checked()
@value ""
//- View -----------------------------------------
- item = ->
%input(type="checkbox" @checked)
%span.item(@class)= @description
%h2 Todos by Hamlet
%input(type="text" @value placeholder="What needs to be done?" onkeydown=@add)
%input(type="checkbox" checked=@completeAll)
%span Mark all as complete
- each @items, item
%span.count= @unfinished
%span.count= @finishedCount

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: