CoffeeScriptでインスタンスメソッドを関数バインディングする

忘れないようにメモ。

イベントをバインディングする時、関数をコールバックで渡すことがある。

$('.hoge_field').on('blur', (e) -> updateHoge(e.target))

updateHoge = (hoge_field) ->
  hogehoge

でも、インスタンスメソッドを渡すときは同様にこうしてはいけない。

index: ->
  $('.hoge_field').on('blur', (e) -> @updateHoge(e.target))

updateHoge: (hoge_field) ->
  hogehoge

なぜなら、コールバックとして渡す際、thisの示す先が変わり、updateHogeが未定義となってしまうから。

なのでこう書く。

  $('.hoge_field').on('blur', (e) => @updateHoge(e.target))

ファットアロー => を使うと、thisの示す先を変えずに扱うことができる。

JavaScript苦手意識あったけど、CoffeeScript触るようになってからわりと楽しくやってるかも。