Ember.js 推荐的从集合中删除项目并保留到 REST 的方法

Question

我遵循了有关 Ember.js 的 PeepCode 教程，并且正在扩展它以从选项卡中删除项目。我还在服务器上实现了一个简单的 RESTful 接口来持久化更改，并且正在使用 DS.RESTAdapter。

有2个相关模型：

• 标签项
• 选项卡，与 TabItem 具有 hasMany 关系

按照教程，我添加了一个简单的删除链接到选项卡模板：

<script type="text/x-handlebars" data-template-name="tab">
  <ul id="customer-tab">
    {{#each tabItem in tabItems}}
    <li>
      <h3><a href="#" {{ action "removeTabItem" tabItem }}>x</a> {{ tabItem.food.name }} <span>{{ money tabItem.cents}}</span></h3>
    </li>
    {{ else }}
      <li><h3>Click a food to add it</h3></li>
    {{/each}}
    <li id="total">
      <h3>Total <span>{{ money cents }}</span></h3></li>
    </li>
  </ul>
</script>

在控制器中

App.TabController = Ember.ObjectController.extend({
  removeTabItem: function(tabItem) {
    var store = this.get('store');
    store.transaction();
    var t = store.find(App.TabItem,tabItem.get('id'));
    t.deleteRecord();
    this.get('tabItems').removeObject(tabItem);
    store.commit();
  }
});

上面的控制器代码是我通过一些反复试验和猜测完成的。 “removeObject”调用似乎是从用户界面中正确删除项目所必需的，并且“deleteRecord”调用似乎是必要的，因此“commit”将导致对服务器的 DELETE 调用。

不过，控制器代码似乎有点冗长，我怀疑我遗漏了一些东西。有没有一种被认为更好的方法，可能更直接地使用“tabItem”，并且使用更少的 API 调用？

Answer 1

回答我自己的问题：

• 行：

  var t = store.find(App.TabItem,tabItem.get('id'));
  

  只是没有必要，我可以使用传递给方法的 tabItem。所以我的 TabController 现在是：

  App.TabController = Ember.ObjectController.extend({
    removeTabItem: function(tabItem) {
      var store = this.get('store');
      store.transaction();
      tabItem.deleteRecord();
      store.commit();
    }
  });
  

• Tab 模型与 TabItem 有“hasMany”关系，但没有自动关系返回，所以当 TabItem 更改（或被删除）时，我怀疑 Tab 不“知道”重绘TabItem 被删除后本身。向 TabItem 添加“belongsTo”关系似乎可以对此进行排序。

  App.TabItem = DS.Model.extend({
    tab: DS.belongsTo('App.Tab'),
    cents: DS.attr('number'),
    food: DS.belongsTo('App.Food')
  });