Ember.JS jQuery Sortable

1

There are a few examples online of using jQuery sortable with Ember.js. They all have different problems:

  1. They don’t have two way binding. If you drag the items around they will update the underlying data model, but if you update the data model, they don’t reflect the changes in the list.
  2. They aren’t reusable. If you want multiple lists throughout your application, you need to copy and paste all the logic. I’d like to be able to drop the list in multiple places, only rewriting the template code for how to display each item.
  3. They aren’t extensible. I want to be able to call into the native jQuery hooks for the sortable when I need to.
  4. Many are out of date and no longer work.

Angular UI has a really nice sortable widget. I tried my hand at recreating it, but I’m stuck in a few places. Problems I’m having:

  1. In the sortable callbacks, I have access to the ul and li, and I can iterate over the li items, but can I know which li is associated with which object in my Ember context array. (I could probably go by position, but this isn’t reliable if I have multiple lists.
  2. My observer function is never called when the list changes. Perhaps the string I pass is incorrect.

Any help is appreciated!

CodePen Work in Progress

2

The primary issue is that the jQuery sortable only sorts visually. You have to manage the updating of the source through the sortable update event. You could bind the index for each element to an id attribute or data-attribute to track the array position, which would also allow you to swap indexes in your model.

You can retrieve the sort order from the toArray method of the sortable plugin. You have to filter out the extra indexes that are added from the metamorph script tags though:

order: function(){
  return Em.A(this.$().sortable("toArray")).filter(function(item,idx){return item !== "";});
}.property()

Regarding the observer, you’re just missing the value to watch. In your case it would be the context:

.observes('context.@each')

And finally, instead of a view, I’d look at wrapping this up into a component. It might fit your described use case a little better.

3

@droberts

Kindly have a look into the below link for jQuery Sortable plugin using Ember.js

jQuery Sortable

4

You’re correct that jQuery only sorts visually. I didn’t want to require the “end user” to add a data-attribute, I want to encapsulate this and handle it automatically if possible. Do you know if it’s possible to assign this attribute after the <li> elements have been created?

Thanks for the tip on the observer

I had original considered using components, but abandoned it when it appeared that I couldn’t pass variables into the component. Take the following example http://codepen.io/anon/pen/CFtpz?editors=101 I would expect that inside the component, the person variable has the value of “Jason”, but it’s null. Perhaps there’s something wrong that I’m doing.

5

Hi ramchiranjeevi, I’ve had a look at that plugin, my main problem is that it’s not repeatable. If I want to have more than one sortable list, I need to copy and paste all that code in my application. Also, I can only have one sortable list per controller. I’m interested in developing a pluging that will easily allow you to pass an array into a component or view, and the array’s sort order will be updated in place (The plugin adds an idx property, and doesn’t alter the array)