在我正在构建的 Ember 应用程序中,我有一个 ArrayController 管理一个项目列表,该列表包含数组中每个记录对象的多列数据, View 中的每个列标题都有一个排序按钮。我已将列表设置为按照 Balint Erdi 推荐的方法对给定列进行排序 here .您将在我下面的代码中看到这种排序。
排序工作正常。但是,当我从数组中删除一个项目时,问题就出现了。目前,当我尝试从数组中删除一个项目时,正确的项目显然已从数组中删除并从商店中正确删除,删除保存到我的后端。但是,删除项目后,我的观点是不正确的。在某些情况下,错误的项目显示为已删除,在其他情况下,没有项目显示为已删除。然而,如果我再次按排序, View 会正确更新。
所以,数组的索引显然是如何偏离的,但我不确定我是如何应用其他人的技巧的所有尝试都没有奏效!
这是我的路线对象:
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 ,但是,我试图应用该答案来解决我自己的问题,但没有成功。此外,我的排序中没有使用 jQuery。
最佳答案
好的。我找到了答案,或者更确切地说,答案找到了我。
我的问题是,在上面的代码中,我从 ArrayController 中删除项目,然后调用 .delete() 和 .save()。这个调用序列向 Ember 发送了关于如何更新我的 View 的相互矛盾的信号。显然, .removeObject() 实际上是从数组中删除项目,但随后的 .delete()/.save() 将 View 后面的模型设置为删除前的状态(不确定,但这就是我看到了)。
所以无论如何,.destroyRecord() 返回一个 promise ,所以我将 .removeObject() 移动到 .then() 中作为 promise ,这解决了问题。
因此,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);
});
}
不过,我还是选择了保守,仔细检查了商店。这对我来说似乎更安全。
关于javascript - Ember.js:从排序的 ArrayController 中删除项目,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24127796/