Ember.js: Suppression d'un élément d'un ArrayController trié

Question

Dans l'application Ember que je construis, j'ai un ArrayController gérant une liste d'éléments avec plusieurs colonnes de données pour chaque objet d'enregistrement dans le tableau avec un bouton de tri dans chaque en-tête de colonne dans la vue. J'ai mis en place la liste pour trier sur une colonne donnée selon la méthode recommandée par Balint Erdi here. Vous verrez ce tri dans mon code ci-dessous.

Le tri fonctionne correctement. Toutefois, le problème se pose lorsque je supprime un élément du tableau. Actuellement, lorsque je tente de supprimer un élément de la matrice, l'élément correct est apparemment supprimé de la matrice et est correctement supprimé du magasin et la suppression est enregistrée dans mon backend. Cependant, après le retrait de l'article, ma vue n'est pas correcte. Dans certains cas, le mauvais article est montré comme enlevé, dans d'autres cas, aucun article n'est montré comme enlevé. Pourtant, SI j'appuie à nouveau sur tri, la vue est mise à jour correctement. Donc, l'index du tableau est évidemment en train de s'enlever, mais je ne sais pas comment et toutes mes tentatives pour appliquer les astuces des autres ne fonctionnent pas!

Voici mon itinéraire objet:

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

Voici mon 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) { 
     .... 
     } 
    } 
    }); 

Et voici mon code modèle:

<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}} 

NOTE: Il y a une certaine similitude entre ma question et cette autre question StackOverflow: After using jQuery UI to sort an Ember.js item, using Ember Data's model.deleteRecord() doesn't work, cependant, j'ai essayé t o appliquer cette réponse à mon propre problème sans succès. De plus, je n'ai pas de jQuery dans mon tri.

Answer 1

OK. J'ai trouvé une réponse, ou plutôt une réponse m'a trouvé.

Mon problème était que dans le code ci-dessus je supprimais l'élément de ArrayController, puis appelait .delete() et .save(). Cette séquence d'appels envoyait des signaux contradictoires à Ember sur la façon de mettre à jour ma vue. Apparemment, le .removeObject() supprimait réellement l'élément du tableau, mais le suivant .delete() /. Save() plaçait le modèle derrière la vue à un état juste avant la suppression (pas sûr de ça mais c'est ce que J'ai vu arriver).

De toute façon, .destroyRecord() renvoie une promesse, donc j'ai déplacé le .removeObject() dans le .then() pour la promesse, et cela résout le problème.

Ainsi, le code suivant dans l'action removeFile a résolu le problème:

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); 
    }); 
    }); 
} 

Notez que vous ne devez pas faire le this.store.find() Tout d'abord, vous pouvez simplement faire ce qui suit:

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

Cependant, j'ai choisi d'être prudent et de revérifier le magasin. Cela semble plus sûr pour moi.