Javascript Ember.js：从已排序的ArrayController中删除项

在我正在构建的Ember应用程序中，我有一个ArrayController，它管理一个项目列表，该列表包含数组中每个记录对象的几列数据，在视图的每个列标题中都有一个排序按钮。我已经按照Balint Erdi推荐的方法设置了列表，以便对给定列进行排序。您将在下面我的代码中看到这种排序

分拣工作正常。但是，当我从数组中删除一个项时，问题就出现了。当前，当我尝试从阵列中删除项目时，正确的项目显然已从阵列中删除，并已从存储中正确删除，删除内容将保存到我的后端。然而，在项目删除后，我的观点是不正确的。在某些情况下，错误的项目显示为已删除，在其他情况下，没有项目显示为已删除。但是，如果我再次按sort，视图将正确更新

因此，数组的索引显然是如何得到的，但我不确定如何得到，我所有尝试应用其他技巧的尝试都不起作用

这是我的路线对象：

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

文件名
大小
{{{#SortedFile中的每个文件}
{{格式化文件大小file.fileSize}
{{/每个}}

---

注意：我的问题和另一个StackOverflow问题之间有一些相似之处：，但是，我试图应用这个答案来回答我自己的问题，但没有成功。此外，我在这里的排序中没有jQuery

好的。我找到了答案，或者更确切地说，答案找到了我

我的问题是，在上面的代码中，我正在从ArrayController中删除该项，然后调用.delete（）和.save（）。这一连串的呼叫向Ember发送了关于如何更新我的视图的冲突信号。显然，.removeObject（）实际上是从数组中删除该项，但随后的.delete（）/.save（）将视图后面的模型设置为删除前的状态（对此不确定，但我看到了这种情况）

不管怎样，.destroyRecord（）返回一个承诺，因此我将.removeObject（）移动到了.then（）中，这就解决了这个问题

因此，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);
  });
}

---

然而，我选择了保守和仔细检查商店。这对我来说似乎更安全。

你能显示格式文件的大小吗？一般来说，ui失控与糟糕的html有关，尽管你的上面看起来不错。我的示例没有显示类似的问题：