Sortable list using Ember.js and jQuery.ui

Question

I am struggling to get a list created by Ember.js sortable using jQuery.ui.

The controller looks like this:

App.ThingyController = Ember.ArrayController.create
  content: [
    { name: 'Item1' },
    { name: 'Item2' }
  ]

and the template like this:

<script type="text/x-handlebars">
  {{#collection contentBinding="App.ThingyController" tagName="ul" id="sortable"}}
    {{content.name}}
  {{/collection}}
</script>

My questions are:

• Where do I best call the sortable() function on the ul "#sortable"? Is there an event on the controller and a handle to the rendered HTML element that I can use?

• How to I connect the jQuery.ui callbacks to the Ember.js controller? Like, say, to send the updated list to the server via ajax?

All of this can be done circumventing the Ember.js abstraction, but I want to do it the "right way".

Or is the whole concept flawed and Ember.js provides for a "sortable" function without jQuery.ui?

Answer 1

you could probably implement Em.View#didInsertElement [1] where you can be sure that the dom element is created and inserted into the body. this would be where you call $.sortable:

App.MySortableView = Em.CollectionView.extend({
  tagName: "ul",
  didInsertElement: function() {
    this.$().sortable()
  }
})

the template:

{{#collection "App.MySortableView" ...}}
  ...
{{/collection}}

(i didn't try this code but i dont see why it shouldn't work...)

[1] https://github.com/emberjs/ember.js/blob/master/packages/ember-views/lib/views/view.js#L738

Answer 2

You need to get Ember to do the sorting using its own sortable mixin, and some attribute on each item. When you call your initial didInsertElement on the parent element, attach an update event trigger function to each of the elements, and make it call sortable('cancel') after recording the full order (before the cancel), you then update each of the items' attributes.

Here's a tutorial on this very process:

http://nerdyworm.com/blog/2013/04/26/ember-dot-js-drag-and-drop-sorting-with-jquery-sortable/

Answer 3

I've seen past examples - you change the sort order of the content in the ember list. You can use the same sorting functions that ember enumerables provides.