EmberJS CRUD：deletedRecord 在 linkTo 之后不断重新出现答案

【问题标题】：EmberJS CRUD : deletedRecord keeps re-appearing after linkToEmberJS CRUD：deletedRecord 在 linkTo 之后不断重新出现
【发布时间】：2013-04-28 22:02:16
【问题描述】：

我在从 Ember.JS 模型中删除记录时遇到问题。

我的车把模板中有一个记录概览，每行都有一个删除按钮。

单击按钮时，我想从表中删除该行（并在我的 REST API 上执行 DELETE）。

我的车把模板包含下表 + 每条记录的删除按钮。

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

我的观点是这样的

App.LocationsIndexView = Ember.View.extend({
    removeItem: function(location) {
      this.get('controller').send('removeItem', location);
    }
 });

我的控制器看起来像这样：

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

调用 removeItem 方法，从表中删除项目，并在 REST API 上调用 DELETE。伟大的！

但是......

如果我切换到另一个模板（使用 linkTo）并返回到概览表（再次使用 linkTo），删除的记录会重新出现在表中。它不再存在于后端，因此无法再次删除：

Uncaught Error: Attempted to handle event `deleteRecord` on <App.Location:ember356:517d96d7658c51de1c000027> while in state rootState.deleted.saved. Called with undefined

我已经阅读了指南，但它们迫使你到处跳。 http://emberjs.com/guides/views/ 看起来很有希望（实际上显示了我想要实现的删除按钮），只是继续做一些完全不同的事情。

我想了解为什么删除的项目会重新出现，以及如何避免这种情况。我也尝试在 ArrayController 中调用 this.removeObject(location) ，但删除的记录不断重新出现。

我可以使用浏览器控制台重现该问题

locs = App.Location.find();
locs.content.length // 返回 5
newLoc = App.Location.createRecord({latitude:120,longitude:120})
locs = App.Location.find();
locs.content.length // 返回 6
newLoc.deleteRecord()
locs.content.length // 返回 5
locs = App.Location.find();
locs.content.length // 返回 6（这里为什么返回 6？）

【问题讨论】：

标签： ember.js ember-data

【解决方案1】：

此问题是由于 ember.js / ember-data.js 中的错误或两者之间的兼容性问题引起的。

当我从 builds.emberjs.com 站点获取最新的一对 ember 和 ember-data 时，问题在某个时候得到了解决。

有了这个组合，删除工作正常，

locs = App.Location.find();
locs.content.length // 返回 5
newLoc = App.Location.createRecord({latitude:120,longitude:120})
locs = App.Location.find();
locs.content.length // 返回 6
newLoc.deleteRecord()
locs.content.length // 返回 5
locs = App.Location.find();
locs.content.length // 现在返回 5，就像之前返回 6 一样

因此，在使用 ember-data 时，请始终确保它与您正在使用的 ember.js 兼容。在 http://builds.emberjs.com 上发布最新版本的 ember 和 ember-data 的 EmberJS 持续集成应该通过他们的测试套件并且应该被认为是兼容的。

【讨论】：