javascript - Ember.js 推荐的从集合中删除项目并坚持到 REST 的方法

Question

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

相关模型有2种:

• 选项卡项
• Tab，与 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>

在 Controller 中

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

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

虽然 Controller 代码似乎有点冗长，但我怀疑我遗漏了什么。有没有一种被认为更好的方法，也许更直接地使用“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 添加“属于”关系似乎可以对此进行排序。

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