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.