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