Ember.jsとjQuery.uiを使用したソート可能なリスト

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"の関数ですか？コントローラーにイベントがあり、使用できるレンダリングされたHTML要素のハンドルがありますか？

• jQuery.uiコールバックをEmber.jsコントローラに接続するにはどうすればいいですか？例えば、更新されたリストをajax経由でサーバーに送るのと同じように？

このすべてがEmber.jsの抽象化を回避して行うことができますが、私はそれを「正しい方法」をやりたいです。

また、概念全体に欠陥があり、Ember.jsがjQuery.uiのない「ソート可能な」関数を提供していますか？

Answer 1

おそらく、DOM要素が作成され、本文に挿入されたことを確認できるEm.View＃didInsertElement [1]を実装できます。

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

テンプレート：あなたは$ .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リストのコンテンツのソート順を変更します。列挙可能な要素と同じソート関数を使用することができます。

Answer 3

をあなたはエンバーは独自のソート可能なミックスイン、および各項目のいくつかの属性を使用してソートを行うために取得する必要があります。親要素で最初のdidInsertElementを呼び出すと、各要素にupdateイベントトリガー関数をアタッチし、フルオーダー（キャンセル前）を記録した後にsortable（ 'cancel'）を呼び出し、アイテムの属性。ここで

は、この非常にプロセスのチュートリアルです：私は見

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