emberjs 中的可排序列表

Question

我已经从服务器加载了一个列表到 handlebar。当列表顺序发生变化时，我需要将排序后的顺序发送回服务器。为了使列表可排序，我使用了 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 可排序 serialize 方法（生成新的列表顺序哈希）并使用新顺序设置控制器属性。 http://api.jqueryui.com/sortable/#method-serialize

PS 如果您熟悉 Rails 有一个很好的 railscast 作为 update & serialize http://railscasts.com/episodes/147-sortable-lists-revised

的说明

Answer 2

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

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

sortable list in emberjs