2

私は Ember.js の PeepCode チュートリアルに従い、それを拡張してタブから項目を削除しています。また、変更を永続化するためにサーバーに単純な RESTful インターフェイスを実装しており、DS.RESTAdapter を使用しています。

2 つの関連モデルがあります。

  • TabItem
  • 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 が削除されました。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 に答える