Ember.js: Удаление элемента из сортированного ArrayController

Question

В приложении Ember, которое я создаю, у меня есть ArrayController, управляющий списком элементов с несколькими столбцами данных для каждого объекта записи в массиве с кнопкой сортировки в каждом заголовке столбца в представлении. Я настроил список для сортировки по заданному столбцу в рекомендуемом методе Балинта Эрди here. Вы увидите эту сортировку в моем коде ниже.

Сортировка прекрасно работает. Однако проблема возникает, когда я удаляю элемент из массива. В настоящее время, когда я пытаюсь удалить элемент из массива, правильный элемент, очевидно, удаляется из массива и удаляется из хранилища, а удаление сохраняется на моем сервере. Однако после удаления элемента мое мнение неверно. В некоторых случаях неправильный элемент отображается как удаленный, в других случаях ни один элемент не отображается как удаленный. Тем не менее, если я снова нажимаю сортировку, представление обновляется правильно.

Итак, индекс массива, очевидно, выходит из некоторых способов, но я не уверен, как и все мои попытки применить трюки других не работают!

Вот мой маршрут объект:

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: After using jQuery UI to sort an Ember.js item, using Ember Data's model.deleteRecord() doesn't work, однако, я попытался t o примените этот ответ на мою собственную проблему без успеха. Кроме того, у меня нет jQuery в моей сортировке.

Answer 1

OK. Я нашел ответ, или, скорее, ответ нашел меня.

Моя проблема заключалась в том, что в приведенном выше коде я удалял элемент из 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); 
    }); 
} 

Однако я решил быть консервативным и дважды проверить магазин. Это кажется мне более безопасным.