jsPlumb

Why doesn’t jsPlumb offer a save function?

I’ve been asked this question enough times now that it warrants its own blog post.

The simple answer is that jsPlumb is a “view” technology.  It’s the V in MVC.  You use jsPlumb to assist in the visualisation of some arbitrary data model: it’s not the data model itself, it’s a part of the picture of the data model.

A well designed UI maintains a clear separation between the data that is being represented and the representation itself.  It’s the same principle you should use everywhere when designing software: loose coupling.  Never make the mistake of tying the UI up with the data model.  What if you wanted to replace the jsPlumb interface with some kind of fancy chart, or a tabular dump, or whatever else you might think of?  You need the model - the M in MVC - to be independent of the view.

Of course, jsPlumb offers a means for your users to establish connections themselves, without your intervention, by drag and drop, so you need a means to keep the data model up to date with the UI.  For this, you should use jsPlumb’s bind method, and register for connection established/connection detached events.  Like this:

jsPlumb.bind("jsPlumbConnection", function(connectionInfo) {
  ...update your data model here.  The contents of the 'connectionInfo' are described below.
});

jsPlumb.bind("jsPlumbConnectionDetached", function(connectionInfo) {
   ...update your data model here.  The contents of the 'connectionInfo' are described below.
});

connectionInfo

This is a JavaScript object containing the following data:

• connection - the newly established Connection.  Using this is the preferred way of working with this event callback, as through it you can access all of the rest of the information that is included in the connectionInfo object.  This was added in jsPlumb 1.3.0; the other fields were the old way of doing things. 
• source - the source element in the Connection
• sourceEndpoint - the source Endpoint in the Connection.
• sourceId - the ID of the source element.
• target - the target element in the Connection.
• targetEndpoint - the target Endpoint in the Connection.
• targetId - the ID of the target element.