2012-04-24 8 views
5

he sido capaz de conseguir jQuery UI Sortable trabajar en Ember.js gracias a @ de ghemton método safeClone: Ember.js + jQuery UI Draggable Clone¿La mejor manera de actualizar el contenido de CollectionView después de jQuery UI ordenable?

estoy teniendo problemas para dejar Ember sabe del cambio, aunque una vez que la especie ha completado. En este momento, estoy usando splice como se sugiere en Move an array element from one array position to another para mover el elemento de la colección al lugar correcto. Eso funciona bien, pero estoy teniendo un problema con el desplazamiento de la ventana.

En este jsfiddle, http://jsfiddle.net/chrisconley/g4aE6/, si se desplaza hacia la parte inferior, a continuación, vuelva a ordenar cualquiera de los elementos, la ventana saltará de nuevo a la parte superior. Si coloca un punto de interrupción entre propertyWillChange y propertyDidChange, puede ver que Ember está eliminando momentáneamente todos los elementos de la vista, lo que hace que la ventana salte de nuevo a la parte superior.

App.MySortableView = Em.CollectionView.extend({ 
    moveItem: function(fromIndex, toIndex){ 
    var items = this.get('content'); 
    this.propertyWillChange('content'); 
    item = items.splice(fromIndex, 1)[0]; 
    items.splice(toIndex, 0, item); 
    this.propertyDidChange('content'); 
    } 
}); 

¿Hay una manera de notificar el cambio de Ember sin él extracción y sustitución de toda la colección?

Actualizado Solución:

(gracias a la respuesta de Christopher Swasey continuación)

App.MySortableView = Em.CollectionView.extend({ 
    moveItem: function(fromIndex, toIndex){ 
    var items = this.get('content'); 
    item = items.objectAt(fromIndex); 
    items.removeAt(fromIndex); 
    items.insertAt(toIndex, item); 
    } 
}); 

ejemplo completo aquí: http://jsfiddle.net/chrisconley/NN35P/

Respuesta

4

No se debe utilizar JS llamadas a las bibliotecas estándar en objetos como Formación. Estas llamadas no son capturables por los enlaces/observadores de Ember. En su lugar, use las API definidas por Ember, como 'replace', 'objectAt', etc. para interactuar con las matrices.

En este caso, querrá cambiar #splice por #replace.

+0

Gracias! Eso lo hizo - la pregunta original ha sido actualizada con una solución. –

Cuestiones relacionadas