私は 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 呼び出しを使用して、より良いと見なされる方法はありますか?