私は、Ember の計算されたプロパティで簡単に達成できることについて、やや途方に暮れています。https://github.com/funkensturm/ember-local-storageを使用して、ローカルのお気に入りリストを管理しています。
これで、オブジェクトのステータスを表示するコンポーネントと、お気に入りの状態を切り替えるための悪名高い「星」ボタンができました。
私のコンポーネントコードは次のようになります:
import Ember from 'ember';
import FavoritesLocal from 'my-app/models/favorites-local';
export default Ember.Component.extend({
storedFavorites: FavoritesLocal.create(),
isFavorite: Ember.computed('storedFavorites', function () {
return this.get('storedFavorites').contains(this.model.get('id'));
}),
actions: {
toggleFavorite() {
if(this.get('isFavorite')) {
this.get('storedFavorites').removeObject(this.model.get('id'));
} else {
this.get('storedFavorites').addObject(this.model.get('id'));
}
}
}
});
テンプレートには
{{#if isFavorite}}
<a {{action 'toggleFavorite'}} href="#"></a>
{{else}}
<a {{action 'toggleFavorite'}} href="#"></a><
{{/if}}
local-storage のモデルは単純です。
import StorageArray from 'ember-local-storage/local/array'
export default StorageArray.extend({
storageKey: 'myFavorites'
});
もちろん、ボタンがクリックされた場合にコンポーネントを更新する必要があります。
私の具体的な質問は、計算されたプロパティが正確に何を監視する必要があるかに関するものです。storedFavorites プロパティ (上記参照) の変更をリッスンするための大雑把な試みが失敗しました。
明らかに、コントローラーにアクションを送信し、それを処理させてテンプレートを更新させることができますが、それは少しやり過ぎに思えますか? 私は何が欠けていますか?
ありがとう!