Jquery-ui Sortable List Not Playing Nice With Reactive Updates In Meteor Template

I'm trying to implement a sortable list of objects with JQuery-UI in the manner described at http://differential.com/blog/sortable-lists-in-meteor-using-jquery-ui. However, rather

Solution 1:

Meteor/Blaze uses an _id attribute to identify data objects and link them to DOM elements. This applies not only to arrays of documents returned by a Collection cursor, but to any array of objects. So in the above issue, the problem was that I used an id value to identify each card rather than _id. Switching id to _id fixes the issue and allows Blaze to properly update the DOM, even if the DOM has previously been modified by JQuery-UI's sortable plugin.

Solution 2:

The Meteor reactivity force you to choose who is in charge of DOM updates.

While it is ok to let Blaze render the DOM and then manipulate it with a third party library (usually a jQuery plugin invoked in a .rendered() method), you are now in a condition in which Blaze doesn't know what happened to your DOM, so every subsequent reactive update could not be consistent.

This is the reason why, for interactive and reactive interface elements, we need a new class of plugins/components/packages Meteor-aware (or better reactive-aware). See for example the difficulties of porting datatables.net to Meteor versus the Meteoric reactive-tables.

All that said, my hack to overcome this problem is to write some reactive code that takes care of detroying and rebuilding the plugin whenever the DB gets updated. This way, you restore the original DOM which Blaze is aware of, let him update it and then reinvoke your jQuery plugin. This is a far (very far) from optimal solution, but saved my day a couple of times.

For .sortable() maybe the best solution is to disable reactivity with option {reactive: false} in the Collection.find() so that when you update the attribute of a card with Meteor.call no redraw takes place but your interface is already consistent.