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) ->
i.checked(val)
model =
removeFinished: ->
@finished().forEach items.remove
@completeAll(false)
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()
.length
add: (e) ->
return unless e.keyCode is 13
item =
description: @value()
checked: Observable false
class: -> "completed" if item.checked()
@items.push(item)
@value ""
//- View -----------------------------------------
- item = ->
%li
%label
%input(type="checkbox" @checked)
%span.item(@class)= @description
%h2 Todos by Hamlet
%input(type="text" @value placeholder="What needs to be done?" onkeydown=@add)
%label(class=@hideMarkComplete)
%input(type="checkbox" checked=@completeAll)
%span Mark all as complete
%ul
- each @items, item
.totals(class=@hideMarkComplete)
.unfinished
%span.count= @unfinished
left
.clear(click=@removeFinished)
Clear
%span.count= @finishedCount
items

Leave a Reply

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

WordPress.com Logo

You are commenting using your WordPress.com 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: