How to use Jquery UI plugins with Backbone.js?

Question

I have a list of elements that I am controlling with Backbone.js, with a view for the list as well as a view for each li element, which each controls a model. I'd like to implement the sortable plugin from the jQuery UI http://jqueryui.com/demos/sortable/, and be able to update the value in models based on their position. Is there a way to do this from within the views, or do I need to take a different approach here?

Answer 1

assuming you're using a collection to store these models, on the collection you have all the information required to get the 'order' of a model within the collection as long as your comparator function represents the sort order you need.

You can get the index of a particular model in a collection like this:

var idx = collectionInstance.indexOf(collectionInstance.get('itemId'))

I can't say I've used jQuery Sortable in conjunction with Backbone yet, as I've always felt that changing the comparator and applying sort does what I require of it.

I particularily liked the following implementation: Proper way to sort a backbone.js collection on the fly.

From the Backbone Documentation we know that triggering a sort manually on a collection:

Force a collection to re-sort itself. You don't need to call this under normal circumstances, as a collection with a comparator function will maintain itself in proper sort order at all times. Calling sort triggers the collection's "reset" event, unless silenced by passing {silent: true}