Elenco ordinabile utilizzando Ember.js e jQuery.ui

Question

Sto lottando per ottenere una lista creata da Ember.js ordinabile utilizzando jQuery.ui.

Il controller si presenta così:

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

e il modello come questo:

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

Le mie domande sono:

• Dove posso meglio chiamare il ordinabile() funzione su ul "#sortable"? C'è un evento sul controller e un handle per l'elemento HTML reso che posso usare?

• Come connettere i callback jQuery.ui al controller Ember.js? Come, per esempio, per inviare l'elenco aggiornato al server tramite ajax?

Tutto ciò può essere fatto aggirare l'astrazione Ember.js, ma voglio farlo nel modo giusto.

Oppure l'intero concetto è imperfetto e Ember.js fornisce una funzione "ordinabile" senza jQuery.ui?

Answer 1

potresti probabilmente implementare Em.View # didInsertElement [1] dove puoi essere sicuro che l'elemento dom è stato creato e inserito nel corpo. questo sarebbe dove si chiama $ .sortable:

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

il modello:

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

(non ho provato questo codice, ma io non vedo perché non dovrebbe funzionare ...)

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

Answer 2

Ho visto esempi precedenti: si modifica l'ordinamento del contenuto nell'elenco di braciole. È possibile utilizzare le stesse funzioni di ordinamento fornite da enumerables ember.

Answer 3

È necessario arrivare Ember per fare la cernita utilizzando il proprio mixin ordinabili, e qualche attributo su ogni elemento. Quando chiami il tuo didietro iniziale sull'elemento padre, allega una funzione di trigger di evento di aggiornamento a ciascuno degli elementi e fallo chiamare sortable ('cancel') dopo aver registrato l'intero ordine (prima dell'annullamento), quindi aggiorna ciascuno dei attributi degli articoli.

Ecco un tutorial su questo processo:

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