Raphael and Backbone events

Backbone.RaphaelView.js.coffee

class Backbone.RaphaelView extends Backbone.View
  delegateRaphaelEvents: (elements)->
    for name,element of elements
      @delegateRaphaelElementEvents name, element
  delegateRaphaelElementEvents: (name, element) ->
    events = [
      "mouseup"
      "mousedown"
      "mousemove"
      "mouseover"
      "mouseout"
      "click"
      "dblclick"
      "touchcancel"
      "touchend"
      "touchmove"
      "touchstart"
    ]
    for event in events
      element[event] (e) =>
        @.$el.trigger "raphael:#{name}:#{e.type}", e
    
class Box extends Backbone.RaphaelView
  initialize: ->
    @paper = Raphael 10, 50, 320, 200
    @box1 = @paper.rect 10, 10, 25, 25
    @box2 = @paper.rect 50, 10, 25, 25
    @circle = @paper.rect 50, 50, 40
    @delegateRaphaelEvents
      box1: @box1
      box2: @box2
      circle: @circle
  events: ->
    "raphael:box1:click"  : "hello"
    "raphael:box2:click"  : "goodbye"
    "raphael:circle:mouseover" : "foo"
  hello: (j_event, r_event) ->
    alert "Hello"
  goodbye: (j_event, r_event) ->
    alert "Goodbye"
  foo: (j_event, r_event) ->
    console.log "mouseover event"