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

我很努力地使用jQuery.ui來獲取由Ember.js排序的列表。使用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」？控制器上是否有事件，並且可以使用呈現的HTML元素的句柄？
如何將jQuery.ui回調連接到Ember.js控制器？比如說，通過ajax發送更新的列表到服務器？

所有這一切都可以做到規避Ember.js抽象，但我想這樣做的「正確的方式」。

或者是整個概念有缺陷，Ember.js提供了一個沒有jQuery.ui的「可排序」功能？

來源

2012-01-24 MoMolog

您可能可以實現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

來源

2012-01-27 08:56:28

謝謝，這就是我一直在尋找的。到目前爲止的結果：http://jsfiddle.net/GtWKY/ – MoMolog

如果這對你有用，一定要接受他的回答。 – MattK

我已經看過去的例子 - 你改變了內容列表中的內容的排序順序。您可以使用與枚舉提供的相同的排序函數。

來源

2012-01-25 16:39:23 MattK

我明白了，但這是如何允許一拖和拖放排序的功能由jquery.ui的排序提供（）？ – MoMolog

對不起 - 不知道你也想拖放。這只是一個猜測，但我會讓ember處理顯示和排序，但是當拖放發生時，我會使用jquery重新排列drop事件中的內容。然後讓燼做顯示。 – MattK

對，這正是我想要的。我只是不知道，如何。 – MoMolog

你需要得到灰燼利用自身的排序混入來進行排序，並在每個項目的一些屬性。當您在父元素上調用初始didInsertElement時，將更新事件觸發器函數附加到每個元素，並在記錄完整的訂單（取消之前）後調用sortable（'cancel'），然後更新每個元素項目的屬性。

下面是關於這個非常進程教程：

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

來源

2014-02-05 14:30:12 Julian

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

回答

相關問題