EmberJS CRUD：deletedRecord在linkTo之后不断重新出现 [英] EmberJS CRUD : deletedRecord keeps re-appearing after linkTo
问题描述
我对我的手柄模板中的记录进行了概述，每行都有一个删除按钮。
点击按钮时，我想从表中删除该行（并在我的REST API上执行DELETE）。
我的手柄模板包含每个记录的下表+删除按钮。
< table class =table表悬停>
< tr>
纬度< / th>
< th>经度< / th>
< th>精度< / th>
< th>< / th>
< / tr>
{{#each model}}
< tr>
< td> {{latitude}}< / td>
< td> {{longitude}}< / td>
< td> {{accuracy}}< / td>
< td>< button {{action removeItem this target =view}}>删除< / button>< / td>
< / tr>
{{/ each}}
< / table>
我的视图看起来像这样
App.LocationsIndexView = Ember.View.extend（{
removeItem：function（location）{
this.get（'controller'）。send（'removeItem'，location ）;
}
}）;
我的控制器如下所示：
App.LocationsIndexController = Ember.ArrayController.extend（{
removeItem：function（location）{
console.log（删除位置+位置）;
location.one（didDelete，this，function（）{
console.log（record deleted）;
this.get（target）。 ）;
}）;
location.deleteRecord（）;
this.get（store）。commit（）;
}
}）;
removeItem方法被调用，项从表中删除，DELETE在REST上被调用API。太好了
但是......
如果我切换到另一个模板（使用linkTo）并返回到概览表（再次使用linkTo），删除的记录将重新出现在表中。
它不再出现在后端，所以不能再删除：
未捕获错误：尝试处理事件`deleteRecord` on< App.Location：ember356：517d96d7658c51de1c000027>而在状态rootState.deleted.saved。被指定为未定义的
我已经浏览了指南，但他们强迫你跳过整个地方。 http://emberjs.com/guides/views/ 看起来很有前途（实际上显示了我的删除按钮想要实现），只能继续完全不同。
我想了解为什么删除的项目重新出现，以及我如何避免这种情况。我已经尝试在ArrayController中调用this.removeObject（location），但删除的记录不断重新出现。
我可以使用浏览器控制台重现问题
- locs = App。 Location.find（）;
- locs.content.length //返回5
- newLoc = App.Location.createRecord（{纬度：120，经度：120}）
- locs = App.Location.find（）;
- locs.content.length //返回6
- newLoc.deleteRecord（）
- locs.content .length // return 5
- locs = App.Location.find（）;
- locs.content.length //返回6（为什么在这里返回6？
此问题是由于ember.js / ember-data.js中的错误或2。
$之间的兼容性问题b$ b
当我从builds.emberjs.com网站上收到最新的一对ember和ember数据时，问题得到解决。
使用此组合，删除工作正常，
- locs = App.Location.find（）;
- locs.content.length //返回5
- newLoc = App.Location.createRecord（{纬度：120，经度：120}）
- locs = App.Location.find ）;
- locs.content.length //返回6
- newLoc.deleteRecord（）
- locs.content.length //返回5
- locs = App.Location.find（）;
- locs.content.length // 现在返回5，因为它应该在这个returnd 6之前
所以当使用ember数据时，始终确保它与您正在使用的ember.js兼容。 EmberJS持续集成，在 http://builds.emberjs.com 上发布最新版本的ember和ember-data应该通过他们的测试套件，应该被认为是兼容的。
I have an issue with deleting records from an Ember.JS model.
I have an overview of records in my handlebars template with a delete button for each row.
When clicking the button I would like to remove that row from the table (and execute a DELETE on my REST API).
My handlebars template contains the following table + delete button for every record.
<table class="table table-hover">
<tr>
<th>Latitude</th>
<th>Longitude</th>
<th>Accuracy</th>
<th></th>
</tr>
{{#each model}}
<tr>
<td>{{latitude}}</td>
<td>{{longitude}}</td>
<td>{{accuracy}}</td>
<td><button {{action removeItem this target="view"}}>Delete</button></td>
</tr>
{{/each}}
</table>
My view looks like this
App.LocationsIndexView = Ember.View.extend({
removeItem: function(location) {
this.get('controller').send('removeItem', location);
}
});
My controller looks like this :
App.LocationsIndexController = Ember.ArrayController.extend({
removeItem: function(location) {
console.log("Removing location " + location);
location.one("didDelete", this, function() {
console.log("record deleted");
this.get("target").transitionTo("locations");
});
location.deleteRecord();
this.get("store").commit();
}
});
The removeItem methods are called, the item is removed from the table and the DELETE is called on the REST API. Great !
However ......
If I switch to another template (using linkTo) and return to the overview table (again using linkTo), the deleted record re-appears in the table. It is not present in the backend anymore so it cannot be delete again :
Uncaught Error: Attempted to handle event `deleteRecord` on <App.Location:ember356:517d96d7658c51de1c000027> while in state rootState.deleted.saved. Called with undefined
I've gone through the guides but they force you to jump all over the place. http://emberjs.com/guides/views/ looked promising (actually showing the delete button that I want to implement), only to continue to something completely different.
I would like to understand why the deleted item re-appears and how I can avoid that. I've tried calling this.removeObject(location) in the ArrayController as well but the deleted record keeps re-appearing.
I can reproduce the issue using the browser console
- locs = App.Location.find();
- locs.content.length // returns 5
- newLoc = App.Location.createRecord({latitude:120,longitude:120})
- locs = App.Location.find();
- locs.content.length // returns 6
- newLoc.deleteRecord()
- locs.content.length // returns 5
- locs = App.Location.find();
- locs.content.length // returns 6 (why is it returning 6 here ?)
This issue was caused due to a bug in ember.js / ember-data.js or a compatibility issue between the 2.
The issue was resolved at some point when I picked up the latest pair of ember and ember-data from the builds.emberjs.com site.
With this combo, the delete worked fine and
- locs = App.Location.find();
- locs.content.length // returns 5
- newLoc = App.Location.createRecord({latitude:120,longitude:120})
- locs = App.Location.find();
- locs.content.length // returns 6
- newLoc.deleteRecord()
- locs.content.length // returns 5
- locs = App.Location.find();
- locs.content.length // returns 5 now as it should where before this returnd 6
So when using ember-data, always ensure that it is compatible with the ember.js you are using. The EmberJS continuous integration that posts the latest versions of ember and ember-data on http://builds.emberjs.com should pass their test suite and should be considered compatible.
这篇关于EmberJS CRUD：deletedRecord在linkTo之后不断重新出现的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
