javascript - Ember.js y jQuery ordenables. Cómo trabajar con los scripts metamorfos

jquery-ui jquery-ui-sortable

Question

Tengo una aplicación ember.js en la que me gustaría usar el widget ordenable de jquery ui. Mi vista se ve como

<ul id="sort-container">
{{#each content}}
    <li>{{title}}</li>
{{/each}}
</ul>

La ordenación funciona bien, hasta que uno de los enlaces necesite actualizarse. El problema es que cada <li> queda rodeado por las infames etiquetas metamorph <script> ember. Ver el DOM real generado en esta imagen

¿Hay alguna manera fácil de hacer que estos dos jueguen bien juntos?

¿Hay alguna manera de obligar a la vista a volver a pintar? Podría implementarlo fácilmente después de que se dispare el evento de deactivate ordenable.

Answer 1

Me parece que usar Ember.CollectionView podría resolver esto. Así que probé. Parece que funciona: http://jsfiddle.net/8ahjd/

bigote daliniano:

<script type="text/x-handlebars">
  {{view App.JQuerySortableView content=model}}
  <a {{action removeItem}}>Remove Second Item</a>
</script>

<script type="text/x-handlebars" data-template-name=''jquery-sortable-item''>
  {{view.content.title}}
</script>

javascript:

App = Ember.Application.create();

App.ApplicationController = Ember.ArrayController.extend({
  removeItem: function() {
    this.removeAt(1);        
  }            
});

App.ApplicationRoute = Ember.Route.extend({
  model: function() {
    return [
      {id: 1, title:''Test 1''},
      {id: 2, title:''Test 2''},
      {id: 3, title:''Test 3''}
    ];
  }
});

App.JQuerySortableItemView = Ember.View.extend({
    templateName: ''jquery-sortable-item''        
});

App.JQuerySortableView = Ember.CollectionView.extend({
    tagName: ''ul'',
    itemViewClass: App.JQuerySortableItemView, 

    didInsertElement: function(){
        this._super();
        this.$().sortable().disableSelection();
    }
});

1.