javascript - ReferenceError: todoItem が定義されていません バックボーン + CoffeeScript

Question

javascriptの代わりにcoffeescriptでバックボーンを使用しようとしています:

TodoItem = Backbone.Model.extend(
  toggleStatus: ->
    if @.get 'status' is "incomplete"
      @.set 'status': 'complete' 
    else
      @.set 'status': 'incomplete'
    @.save()  
    )

todoItem = new TodoItem(
  description: 'I play the guitar'
  status: 'incomplete'
  id: 1
)

TodoView = Backbone.View.extend(
  tagName: 'div'
  id: "box"
  className: 'red-box'

  events: 
    "click h3": "alertStatus"
    'change input': 'toggleStatus'

  template: 
    _.template "<h3> <input type=checkbox #{ print "checked" if status is "complete"} /> <%= description %></h3>"

  initialize: ->
    @.model.on 'change', @.render, @
    @.model.on 'destroy', @.remove, @

  toggleStatus: ->
    @.model.toggleStatus()

  alertStatus: ->
    alert('Hey you clicked the h3!')

  remove: ->
    @.$el.remove()

  render: ->
    @.$el.html @.template(@.model.toJSON())
)

todoView = new TodoView({model: todoItem})
todoView.render()
console.log todoView.el

コンソールで試してみると：

todoItem.set({description: 'asdfadfasdfa'});

私は得る：

ReferenceError: todoItem is not defined

また、体の中に div が見えません:

<div id="box" class="red-box">
  <h3>
  <input type="checkbox" undefined>
  "I play the guitar"
  </h3>
 </div>

しかし、コンソールでこの div を確認できます。

エラーはどこにありますか？

ありがとうございました！