Ember.js: eliminar un elemento de un ArrayController orderado

En la aplicación Ember que estoy comstackndo, tengo un ArrayController que administra una list de elementos con varias columnas de datos para cada object de logging en la matriz con un button de orderación en cada encabezado de columna en la vista. He configurado la list para orderar en una columna determinada por el método recomendado de Balint Erdi aquí . Verás esta orderación en mi código a continuación.

La sorting funciona bien. Sin embargo, el problema surge cuando elimino un elemento de la matriz. Actualmente, cuando bash eliminar un elemento de la matriz, el elemento correcto aparentemente se elimina de la matriz y se elimina correctamente de la tienda y la eliminación se guarda en mi server. Sin embargo, después de la eliminación del elemento, mi vista no es correcta. En algunos casos, el artículo incorrecto se muestra como eliminado, en otros casos, no se muestra como eliminado. Sin embargo, SI presiono orderar de nuevo, la vista se actualiza correctamente.

Por lo tanto, el índice de la matriz obviamente se está poniendo de alguna manera, pero no estoy seguro de cómo y todos mis bashs de aplicar los trucos de otros no están funcionando.

Aquí está mi object de ruta:

App.UsersFilesRoute = Ember.Route.extend({ model: function () { return this.modelFor('users').get('files'); } }); 

Aquí está mi ArrayController:

  App.UsersFilesController = Ember.ArrayController.extend({ sortProperties: ['name'], sortedFiles: Ember.computed.sort('model', 'sortProperties'), actions: { addFile: function(file) { var newFile = this.store.createRecord('file', { name: file.name.trim(), fileSize: file.size, loaded: false }); this.pushObject(newFile); }, sortBy: function (sortProperties) { this.set('sortProperties', [sortProperties]); }, removeFile: function (fileToRemove) { var _this = this; var file = this.store.find('file', fileToRemove.get('id')); file.then( function (file) { _this.removeObject(file); file.deleteRecord(); file.save(); }); }, saveFile: function (file) { .... } } }); 

Y aquí está mi código de plantilla:

  <div class="hidden-xs row user-file-header-row"> <div class="col-sm-5 col-md-5 user-file-header"> File Name <button type="button" class="btn-xs btn-default files-sort-btn" {{ action 'sortBy' 'name'}}></button> </div> <div class="col-sm-1 col-md-1 user-file-header"> Size <button type="button" class="btn-xs btn-default files-sort-btn" {{ action 'sortBy' 'fileSize'}}></button> </div> </div> {{#each file in sortedFiles}} <div class="row user-file user-file-break"> <div class="col-xs-11 col-sm-5 col-md-5 user-file-name"> <a {{ bind-attr href="file.path" }} >{{ file.name }} </a> </div> <div class="col-xs-9 col-sm-1 col-md-1"> {{ format-file-size file.fileSize }} </div> <div class="col-xs-9 col-sm-1 col-md-1"> <button type="button" class="btn-xs btn-default files-list-btn" {{ action 'removeFile' file }}></button> </div> </div> {{/each}} 

NOTA: Hay cierta similitud entre mi pregunta y esta otra pregunta de StackOverflow: después de usar la interfaz de usuario de jQuery para orderar un elemento de Ember.js, el uso de model.deleteRecord () de Ember Data no funciona , sin embargo, he intentado aplicar esa respuesta mi propio problema sin éxito. Además, no tengo jQuery pasando aquí en mi sorting.

DE ACUERDO. He encontrado una respuesta, o mejor dicho, una respuesta me ha encontrado.

Mi problema era que en el código anterior estaba eliminando el elemento del ArrayController y luego llamando a .delete () y .save (). Esta secuencia de llamadas enviaba señales conflictivas a Ember sobre cómo actualizar mi vista. Aparentemente, .removeObject () en realidad estaba eliminando el elemento de la matriz, pero luego el .delete () /. Save () posterior estaba configurando el model detrás de la vista en un estado justo antes de la eliminación (no estoy seguro de eso pero eso es lo que Vi que sucedía).

De todos modos, .destroyRecord () devuelve una promise, así que moví el .removeObject () dentro de .then () para la promise, y eso resuelve el problema.

Por lo tanto, el siguiente código en la acción removeFile resolvió el problema:

 removeFile: function () { var self = this; var fileToRemove = this.get('fileToRemove'); var file = this.store.find('file', fileToRemove.get('id')); file.then (function (file) { file.destroyRecord().then(function(){ self.get('model').removeObject(file); }); }); } 

Tenga en count que no tiene que hacer el this.store.find () primero, simplemente puede hacer lo siguiente:

 removeFile: function () { var self = this; var fileToRemove = this.get('fileToRemove'); fileToRemove .destroyRecord().then(function(){ self.get('model').removeObject(file); }); } 

Sin embargo, elegí ser conservador y verificar la tienda. Eso me parece más seguro.