Ember 组件：计算属性观察本地存储数组

Question

对于使用 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}}

本地存储的模型很简单

import StorageArray from 'ember-local-storage/local/array'

export default StorageArray.extend({
    storageKey: 'myFavorites'  
});

现在，我当然希望在单击按钮时更新组件。

我的具体问题是关于计算属性应该观察什么。监听storedFavorites 属性（见上文）更改的粗略尝试失败。

显然，我可以向控制器发送一个动作，让它处理它并更新模板，但这似乎有点过头了？我错过了什么？

谢谢！

Answer 1

我还没有处理过这个，但我猜你想观察storedFavorites.length。