Ember.js：從Sorted ArrayController中刪除一個項目

Question

在我正在構建的Ember應用程序中，我有一個ArrayController管理一個項目列表，其中包含數組中每個記錄對象的幾列數據，並在視圖的每個列標題中都有一個排序按鈕。 我已經設置了名單每巴林特ERDI推薦的方法給定列排序這里 。 您將在下面的代碼中看到這種排序。

分揀工作正常。 但是，當我從數組中刪除項目時出現問題。 目前，當我嘗試從數組中刪除項目時，顯然從數組中刪除了正確的項目並從存儲中正確刪除，並將刪除保存到我的后端。 但是，刪除項目后，我的視圖不正確。 在某些情況下，錯誤的項目顯示為已刪除，在其他情況下，沒有項目顯示為已刪除。 然而，如果我再次按排序，視圖會正確更新。

所以，陣列的索引顯然是如何下降的，但我不確定我的所有嘗試應用其他人的技巧是不行的！

這是我的路線對象：

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

這是我的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) {
        ....
      }
    }
  });

這是我的模板代碼：

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

注意：我的問題和其他StackOverflow問題之間有一些相似之處： 使用jQuery UI對Ember.js項進行排序后，使用Ember Data的model.deleteRecord（）不起作用 ，但是，我試圖應用該答案我自己的問題沒有成功。 此外，我的排序中沒有jQuery。

Answer 1

好。 我找到了答案，或者說答案找到了我。

我的問題是在上面的代碼中我從ArrayController中刪除了項目，然后調用.delete（）和.save（）。 這一系列的調用向Ember發送了有關如何更新我的視圖的沖突信號。 顯然，.removeObject（）實際上是從數組中刪除項目，但后來的.delete（）/。save（）將視圖后面的模型設置為刪除之前的狀態（不確定但是那是什么我看到了發生的事情）。

所以無論如何，.destroyRecord（）返回一個promise，所以我在.then（）中為了promise移動了.removeObject（），這解決了這個問題。

因此，removeFile操作中的以下代碼解決了該問題：

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

請注意，您不必首先執行this.store.find（），您只需執行以下操作：

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

但是，我選擇保守並仔細檢查商店。 這對我來說似乎更安全。