MV.coffee

# http://hokaccha.github.io/slides/javascript_design_and_test/ の写経

class Todo
  @list: []

  @add: (text) ->
    todo = new Todo(text: text)
    Todo.list.push(todo)
    @trigger('add', todo)

  constructor: (opts)
    @text = opts.text

  setComplete: (complete)
    @complete
    @trigger('change:complete', this)

# Todoを入力するフォームを管理するViewクラス
class TodoFormView
  constructor: (el)
    @el = el
    @input = el.find('input[type="text"]')
    @el.submit(@onsubmit.bind(@))

  onsubmit: (e) ->
    e.preventDefault()
    Todo.add(@input.val())

# Todo一覧のリストを管理するViewクラス
class TodoListView
  constructor: (el)
    @el = el
    # つまり、viewを生成するコードはmodelには無いが、modelのイベントにフックする形でViewクラスに書く
    Todo.on('add', @add.bind(@))

  add: (todo) ->
    item = new TodoListItemView(todo)
    @el.append(item.el)

# Todo一覧の要素を管理
class TodoListItemView
  consturctor: (todo) ->
    @todo = todo
    @el = $("<li><input type='checkbox'>#{todo.text}</li>")
    @checkbox = @el.find('input[type="checkbox"]')
    @checkbox.change(@onchangeCheckbox.bind(@))
    @todo.on('change:complete', @onchangeComplete.bind(@))

  onchangeCheckbox: ->
    @todo.setComplete(@checkbox.is(':checked'))

  onchangeComplete: ->
    if @todo.complete
      @el.addClass('complete')
    else
      @el.removeClass('complete')

    @checkbox.attr('checked', @todo.compelete)

# main.js
jQuery(($)->
  new TodoFormView($('.todo_form'))
  new TodoListView($('.todo_list'))
)

triggerとかonとかはbackbone.jsのやつ

http://backbonejs.org/backbone.js

  var Events = Backbone.Events = {

    // Bind an event to a `callback` function. Passing `"all"` will bind
    // the callback to all events fired.
    on: function(name, callback, context) {
      if (!eventsApi(this, 'on', name, [callback, context]) || !callback) return this;
      this._events || (this._events = {});
      var events = this._events[name] || (this._events[name] = []);
      events.push({callback: callback, context: context, ctx: context || this});
      return this;
    },
...
    // Trigger one or many events, firing all bound callbacks. Callbacks are
    // passed the same arguments as `trigger` is, apart from the event name
    // (unless you're listening on `"all"`, which will cause your callback to
    // receive the true name of the event as the first argument).
    trigger: function(name) {
      if (!this._events) return this;
      var args = slice.call(arguments, 1);
      if (!eventsApi(this, 'trigger', name, args)) return this;
      var events = this._events[name];
      var allEvents = this._events.all;
      if (events) triggerEvents(events, args);
      if (allEvents) triggerEvents(allEvents, arguments);
      return this;
    },

まあ簡単だね