jsPlumb in Ember

In this experiment I try to demonstrate how jsPlumb can be used in an Ember.js application.

HTML

<script src="http://cloud.github.com/downloads/wycats/handlebars.js/handlebars-1.0.0.beta.6.js"></script>
<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script src="http://cloud.github.com/downloads/emberjs/ember.js/ember-1.0.pre.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/jquery-ui.min.js"></script>
<script src="http://jsplumb.googlecode.com/files/jquery.jsPlumb-1.3.3-all.js"></script>
<script type="text/x-handlebars">
{{view App.EpicView}}
</script>

CSS

._jsPlumb_overlay { z-index:51; }
._jsPlumb_endpoint { z-index:50; cursor:move; }
._jsPlumb_connector { z-index:1; }

.window { 
    display: block;
    border:1px solid #346789;
    box-shadow: 2px 2px 19px #aaa;
    -o-box-shadow: 2px 2px 19px #aaa;
    -webkit-box-shadow: 2px 2px 19px #aaa;
    -moz-box-shadow: 2px 2px 19px #aaa;
    -moz-border-radius:0.5em;
    border-radius:0.5em;
    opacity:0.8;
    filter:alpha(opacity=80);
    width:5em; height:5em;
    line-height:5em;
    text-align:center;
    z-index:60; position:absolute;
    background-color:#eeeeef;
    color:black;
    font-family:helvetica;padding:0.5em;
    font-size:0.9em;
    left: 10em;
    top: 10em;
}
.window:hover {
    box-shadow: 2px 2px 19px #444;
    -o-box-shadow: 2px 2px 19px #444;
    -webkit-box-shadow: 2px 2px 19px #444;
    -moz-box-shadow: 2px 2px 19px #444;
    opacity:0.6;
    filter:alpha(opacity=60);
}

.dropHover { border:1px solid orange; }

CoffeeScript

window.App = Ember.Application.create()
window.App.initialize()

jsPlumb.bind "ready", () ->
  jsPlumb.setRenderMode jsPlumb.SVG
  jsPlumb.Defaults.Anchors = ["TopCenter", "TopCenter"]
  jsPlumb.Defaults.DragOptions = { cursor: 'wait', zIndex:20 }
  jsPlumb.Defaults.Connector = [ "Bezier", { curviness: 90 } ]

App.Item = Em.View.extend
  tagName: 'div'
  classNames: ['window']
  didInsertElement: () ->
    endpoint = 
      connectorStyle:{ lineWidth:7, strokeStyle:"#456456", dashstyle:"2 2" },        
      isSource:true,
      maxConnections:10,
      isTarget:true,
      dropOptions:{ tolerance:"touch",hoverClass:"dropHover" }

    element = this.get 'element'
    jsPlumb.addEndpoint element, endpoint
    console.log "added element", element
    
    jsPlumb.draggable element
    
  template: Ember.Handlebars.compile("~~ {{view.content.title}} ~~")

App.items = Em.ArrayController.create()

App.items.set('content',[
    Em.Object.create({title:"AN", id:"item-one"}),
    Em.Object.create({title:"Epic", id:"item-two"}),
    Em.Object.create({title:"View", id:"item-three"})
  ])
  
App.EpicView = Ember.CollectionView.extend
  contentBinding: 'App.items'
  itemViewClass: 'App.Item'