emberjs中的可排序列表

Question

我已将服务器列表加载到车把中。当列表顺序改变时，我需要将已排序的订单发送回服务器。为了使列表可排序，我使用了jquery-ui.js。当我通过拖放列表更改列表顺序时，视觉上列表顺序会更改。但它在控制器数据中没有改变。

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,
});

我无法找到，如何在列表顺序更改时更改控制器数据。 只是指出我正确的方向。

Answer 1

正确方向：

1）您可以附加jquery可排序update事件的侦听器（当用户停止排序并且DOM位置发生更改时触发）：http://api.jqueryui.com/sortable/#event-update

2）在update上，您可以使用jquery sortable serialize方法（生成新的列表顺序哈希）并使用新顺序设置controller属性。 http://api.jqueryui.com/sortable/#method-serialize

PS如果您熟悉Rails，可以使用update＆amp; serialize http://railscasts.com/episodes/147-sortable-lists-revised

Answer 2

不幸的是，使用jQuery UI对项目进行排序实际上并不会改变项目的顺序。

您可能需要查看插件ember-sortable - 它应该为您提供所需的所有功能。