0

我在从 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？）
4

1 回答 1

1

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

当我从 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 持续集成应该通过他们的测试套件并且应该被认为是兼容的。

于 2013-05-01T20:38:15.910 回答