可排序列表使用Ember.js和jQuery.ui [英] Sortable list using Ember.js and jQuery.ui

问题描述

控制器看起来像这样：

我很努力得到一个使用jQuery.ui可以排序的Ember.js创建的列表。

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

和模板如下：

 < script type =text / x-handlebars> 
 {{#collection contentBinding =App.ThingyControllertagName =ulid =sortable}} 
 {{content.name}} 
 {{/ collection}} 
< / script> 
  

我的问题是：

• 我最好在ul#sortable上调用sortable（）函数？控制器上有一个事件和可以使用的渲染HTML元素的句柄？




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

所有这一切都可以避免Ember.js的抽象，但我想做到这一点正确的方式。或者是整个概念有缺陷，Ember.js提供了一个没有jQuery.ui的可排序功能。

解决方案

你可以实现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

I am struggling to get a list created by Ember.js sortable using jQuery.ui.

The controller looks like this:

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

and the template like this:

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

My questions are:

• Where do I best call the sortable() function on the ul "#sortable"? Is there an event on the controller and a handle to the rendered HTML element that I can use?

• How to I connect the jQuery.ui callbacks to the Ember.js controller? Like, say, to send the updated list to the server via ajax?

All of this can be done circumventing the Ember.js abstraction, but I want to do it the "right way".

Or is the whole concept flawed and Ember.js provides for a "sortable" function without jQuery.ui?

解决方案

you could probably implement Em.View#didInsertElement [1] where you can be sure that the dom element is created and inserted into the body. this would be where you call $.sortable:

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

the template:

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

(i didn't try this code but i dont see why it shouldn't work...)

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

这篇关于可排序列表使用Ember.js和jQuery.ui的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！