使用 Ember.js 和 jQuery.ui 的可排序列表

Question

我正在努力获取由 Ember.js 创建的可使用 jQuery.ui 排序的列表。

控制器如下所示：

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

和这样的模板：

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

我的问题是：

• 在哪里最好调用 ul“#sortable”上的 sortable() 函数？控制器上有没有我可以使用的事件和渲染的 HTML 元素的句柄？

• 如何将 jQuery.ui 回调连接到 Ember.js 控制器？比如说，通过 ajax 将更新后的列表发送到服务器？

所有这些都可以绕过 Ember.js 抽象来完成，但我想以“正确的方式”来做。

或者整个概念有缺陷，Ember.js 提供了一个没有 jQuery.ui 的“可排序”功能？

Answer 1

您可能可以实现 Em.View#didInsertElement [1]，您可以确保 dom 元素已创建并插入到正文中。这就是你调用 $.sortable 的地方：

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

模板：

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

（我没有尝试此代码，但我不明白为什么它不应该工作......）

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

Answer 2

你需要让 Ember 使用它自己的可排序 mixin 以及每个项目的一些属性来进行排序。当您在父元素上调用初始 didInsertElement 时，将更新事件触发函数附加到每个元素，并在记录完整订单后（取消之前）使其调用 sortable('cancel')，然后更新每个物品的属性。

这里有一个关于这个过程的教程：

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

Answer 3

我已经看过过去的示例 - 您更改了 ember 列表中内容的排序顺序。您可以使用 ember 枚举提供的相同排序功能。