Using jsPlumb in an Ember.js Application

Question

I am trying to learn how to use jsPlumb in my Ember.js application so I put a minimal jsFiddle together to demonstrate how they could work together.

In this example so far I just insert the nodes and add them to jsPlumb. I have not added any links between them yet. At this stage the nodes should be draggable but they are not.

Error I get in the browser console:

TypeError: myOffset is null

Which points to this part of the code in jsPlumb:

for (var i = 0; i < inputs.length; i++) {
    var _el = _getElementObject(inputs[i]), id = _getId(_el);
    p.source = _el;
    _updateOffset({ elId : id });
    var e = _newEndpoint(p);
    _addToList(endpointsByElement, id, e);
    var myOffset = offsets[id], myWH = sizes[id];
    var anchorLoc = e.anchor.compute( { xy : [ myOffset.left, myOffset.top ], wh : myWH, element : e });
    e.paint({ anchorLoc : anchorLoc });
    results.push(e);
}

You can see that a simple example without integration with Ember.js works as expected. I know that this version of jsPlumb I have uses jquery-ui to clone elements and support drag and drop. A post here shows there is an issue with jquery-ui draggable functionality in Ember. However, I am not sure if I am hitting the same problem. If that is the same issue I am having, I would appreciate some help in how to implement the solution suggested there in my application. I am new to both Ember and jsPlumb, so I would appreciate clear guidance about what is going on here and what path to take.

How can I make this example work?

score 2 · Accepted Answer · answered Sep 24 '12 at 04:10

Luckily my suspicion was wrong and the issue was not with metamorph. jsPlumb and Ember work just fine together, without any hacks. I put a little example in this jsFiddle that demonstrates how they could work together.

Credit goes to Simon Porritt who helped me at jsPlumb user group to identify the problem. What I was missing was a simple call to jsPlumb.draggable element. However, the above error persisted after this fix.

The particular error message above was result of Ember calling didInsertElement an extra time with an element which did not make it to the DOM. I have reported this issue. One workaround is to check the element makes it into the DOM before calling jsPlumb. As you can see in the jsFiddle I have added this code in the didInsertElement hook to get rid of the error.

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"

Hope this helps someone.

Using jsPlumb in an Ember.js Application

1 Answers1