Question

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

控制器如下所示：

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'），然后更新每个元素items的属性。

这是关于这个过程的教程：

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

Answer 3

我见过过去的例子 - 你改变了余烬列表中内容的排序顺序。您可以使用ember enumerables提供的相同排序函数。

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

3 个答案: