2

我遵循了 Ember.js 上的 PeepCode 教程，并将其扩展为从选项卡中删除项目。我还在服务器上实现了一个简单的 RESTful 接口来持久化更改，并且正在使用 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>

并且在控制器中 

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 调用？

4

1 回答 1

0

回答我自己的问题：

  • 该行：

    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 在 a 之后不“知道”重绘自身TabItem 已被删除。向 TabItem 添加“belongsTo”关系似乎可以对此进行排序。

    App.TabItem = DS.Model.extend({
  tab: DS.belongsTo('App.Tab'),
  cents: DS.attr('number'),
  food: DS.belongsTo('App.Food')
});
于 2013-03-11T08:57:57.050 回答