Ember.js: Löschen eines Elements aus einem sortierten ArrayController

Question

In der Ember-App, die ich erstelle, habe ich einen ArrayController, der eine Liste von Elementen mit mehreren Datenspalten für jedes Datensatzobjekt im Array mit einer Sortierschaltfläche verwaltet in jeder Spaltenüberschrift in der Ansicht. Ich habe die Liste eingerichtet, um nach Balint Erdis empfohlener Methode here nach einer bestimmten Spalte zu sortieren. Sie werden diese Sortierung in meinem Code sehen.

Die Sortierung funktioniert gut. Das Problem tritt jedoch auf, wenn ich ein Element aus dem Array entferne. Momentan, wenn ich versuche, ein Objekt aus dem Array zu entfernen, wird das korrekte Objekt offensichtlich aus dem Array entfernt und ordnungsgemäß aus dem Geschäft gelöscht, und das Löschen wird in meinem Backend gespeichert. Nach der Entfernung des Objekts ist meine Ansicht jedoch nicht korrekt. In einigen Fällen wird das falsche Element als entfernt angezeigt, in anderen Fällen wird kein Element als entfernt angezeigt. Wenn ich jedoch erneut sort drücke, wird die Ansicht korrekt aktualisiert.

Also, der Index des Arrays ist offensichtlich aus wie einige, aber ich bin mir nicht sicher, wie und alle meine Versuche, die Tricks anderer anzuwenden, funktionieren nicht!

Hier ist meine Route Objekt:

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

Hier meine Arraycontroller ist:

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

Und hier ist mein Template-Code:

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

HINWEIS: Es besteht eine gewisse Ähnlichkeit zwischen meine Frage und diese andere StackOverflow Frage: After using jQuery UI to sort an Ember.js item, using Ember Data's model.deleteRecord() doesn't work habe ich jedoch versucht o wenden Sie das an, um mein eigenes Problem ohne Erfolg zu beantworten. Außerdem habe ich hier keine jQuery in meiner Sortierung.

Answer 1

OK. Ich habe eine Antwort gefunden, oder eher eine Antwort hat mich gefunden.

Mein Problem war, dass ich in dem obigen Code das Element vom ArrayController entfernte und dann .delete() und .save() aufruft. Diese Folge von Anrufen hat widersprüchliche Signale an Ember gesendet, wie ich meine Ansicht aktualisieren soll. Anscheinend entfernte das .removeObject() tatsächlich das Element aus dem Array, aber dann stellte das nachfolgende .delete() /. Save() das Modell hinter der Ansicht auf einen Zustand kurz vor dem Löschen ein (nicht sicher, aber das ist was Ich habe gesehen, passiert).

Also sowieso, .destroyRecord() gibt eine Zusage zurück, also habe ich die .removeObject() innerhalb der .then() für die Zusage verschoben, und das behebt das Problem.

also der folgende Code in der RemoveFile Aktion das Problem gelöst:

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

Beachten Sie, dass Sie haben, um die this.store.find nicht zu tun() zuerst, können Sie einfach wie folgt vor:

Allerdings habe ich mich entschieden, konservativ zu sein und den Laden zu überprüfen. Das scheint mir sicherer zu sein.