jsbin.EHEjExi.coffee

class TodoModel
  constructor: ->
    @todos = []
    @callbacks = []
  add: (name) ->
    @todos.push name: name, completed: false
    @handleChange 'add', name
  onChange: (callback) ->
    @callbacks.push callback
  handleChange: (type, value) ->
    for callback in @callbacks
      callback.call null, @

class TodoView
  constructor: (selector) ->
    @list = $ selector
  update: (model) =>
    @list.empty()
    for todo in model.todos
      @list.append $ "<li>#{todo.name}</li>"
  
class TodoApp
  constructor: ->
    @input = $ '.new'
    @model = new TodoModel()
    @view = new TodoView ' .list'
    @model.onChange @view.update
  initialize: ->
    @input.on 'keydown', (event) =>
      return unless event.keyCode is 13
      @model.add event.currentTarget.value
      event.currentTarget.value = ''
  
app = new TodoApp()
app.initialize()

jsbin.EHEjExi.jade

script(src='http://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js')

section.app
  header
    input.new(placeholder='What needs to be done?')
  ul.list

jsbin.EHEjExi.less

@br: 4px; // border-radius
@mg: #aaa; // medium gray
@dg: #444; // dark gray
@bg: #fafafa; // bright gray
@cy: #0af; // cyan

body {
  background-color: #eee;
  background-image: repeating-linear-gradient(45deg, transparent, transparent 35px, rgba(255,255,255,.3) 35px, rgba(255,255,255,.3) 70px);
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

header {
  background: white;
  border-top: 15px solid @cy;
  border-top-left-radius: @br;
  border-top-right-radius: @br;
}

.new {
  margin: 0;
  width: 100%;
  font-family: inherit;
  line-height: 1.4em;
  outline: none;
  background: @bg;
}

.new, .list li {
  border: 1px solid #bbb;
  padding: 6px 12px;
  font-size: 24px;
  border-top: none;
  color: @dg;
  -webkit-box-sizing: border-box;
  -webkit-font-smoothing: antialiased;
}

.list li {
  background: white;
}