sortable list in emberjs

Question

i have loaded a list from server into handlebar. when the list order changes, i need to send the sorted order back to the server. to make a list sortable, i have used jquery-ui.js. when i change the list order by dragging and dropping the list, visually the list order changes. but it is not changed inside the controller data.

application.hbs:

<ul>
    {{#each lists as |list|}}
        <li>{{list.name}}</li>
    {{else}}
        <!--   Empty data handling     -->
    {{/each}}
</ul>

application.js

var List = [{name:'list1'}, {name:'list2'}, {name:'list3'}];
var Controller = Ember.Controller.extend({
  lists : Lists,
});

i can't find, how to make the controller data to change when the list order changes. just point me in the right direction.

Answer 1

Unfortunately sorting the items with jQuery UI doesn't actually change the order of the items.

You might want to look into the addon ember-sortable - it should provide you all the functionality you need.

Answer 2

Right direction:

1) You could attach listener of jquery sortable update event (triggered when the user stopped sorting and the DOM position has changed): http://api.jqueryui.com/sortable/#event-update

2) On update you could use jquery sortable serialize method (produces a new list order hash) and set controller property with new order. http://api.jqueryui.com/sortable/#method-serialize

PS If you are familiar with Rails there is a good railscast as illustration of update & serialize http://railscasts.com/episodes/147-sortable-lists-revised