Sortable list using Ember.js i jQuery.ui

Question

Staram się uzyskać listę utworzoną przez Ember.js do sortowania za pomocą jQuery.ui.

Kontroler wygląda następująco:

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

i szablon tak:

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

moje pytania są następujące:

• Gdzie mogę najlepiej zadzwonić do sortable() funkcja na ul "#sortable"? Czy istnieje zdarzenie na kontrolerze i uchwyt do renderowanego elementu HTML, którego mogę użyć?

• Jak podłączyć wywołania zwrotne jQuery.ui do kontrolera Ember.js? Jak, powiedzmy, wysłać zaktualizowaną listę do serwera za pośrednictwem ajax?

Wszystko to można zrobić obejście abstrakcję ember.js, ale chcę zrobić to „właściwy sposób”.

Czy cała koncepcja jest wadliwa, a Ember.js zapewnia funkcję "sortowalną" bez jQuery.ui?

Answer 1

prawdopodobnie mógłbyś zaimplementować Em.View # didInsertElement [1], gdzie możesz być pewien, że element dom jest tworzony i wstawiany do ciała. to byłoby gdzie zadzwonić $ .sortable:

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

szablon:

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

(nie próbowałem ten kod, ale nie widzę, dlaczego nie powinno działać ...)

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

Answer 2

Widziałem poprzednie przykłady - zmieniasz kolejność sortowania treści na liście embers. Możesz użyć tych samych funkcji sortowania, które oferuje ember enumerables.

Answer 3

Musisz dostać Ember zrobić sortowanie za pomocą własnego sortable wstawek, a niektóre atrybut każdego elementu. Po wywołaniu początkowej właściwości didInsertElement w elemencie nadrzędnym należy dołączyć funkcję wyzwalacza aktualizacji do każdego elementu i ustawić wywołanie sortable ("anuluj") po zarejestrowaniu całego zamówienia (przed anulowaniem), a następnie zaktualizować każdą z nich. atrybuty przedmiotów.

Oto poradnik na ten sam proces:

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