jsPlumb in Ember

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

by Aras Balali Moghaddam

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> 

<script type="text/x-handlebars" data-template-name="element-template">
    <img {{bindAttr src="view.content.skin" title="view.content.id"}}> 
 ~~ {{view.content.title}} ~~
</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:9em; 
    height:9em;
    line-height:1.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']
  templateName: 'element-template'
  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'
    elementId = this.get 'elementId'
    element = $("#"+elementId)
    if element.size() > 0
      console.log "added element", element
      jsPlumb.addEndpoint element, endpoint
      jsPlumb.draggable element
    else
      console.log "bad element"
    
App.items = Em.ArrayController.create()

App.items.set('content',[
    Em.Object.create({title:"AN", id:"item-one", skin: "http://shijitht.files.wordpress.com/2010/08/github.png"}),
    Em.Object.create({title:"Epic", id:"item-two", skin: "http://icons-search.com/img/yellowicon/penguin_linux.zip/Linux-icons-Penguin_2_128x128.png-128x128.png"}),
    Em.Object.create({title:"View", id:"item-three", skin: "https://secure.gravatar.com/avatar/792333d2bad390e8a2e23f5e2f41f214?s=128"})
  ])
  
App.EpicView = Ember.CollectionView.extend
  contentBinding: 'App.items'
  itemViewClass: 'App.Item'