各-におけるキーは、コントローラ内のデータソース

Question

から削除されたときに再レンダリングを取得されていない、私は次のコードを持って、私のテンプレートで

export default Controller.extend({ 
    session: service(), 

    cards: {}, 

    init() { 
    this._super(...arguments); 

    const uid = this.get('session.data.authenticated.user.uid'); 

    const databaseRef = firebase.database() 
     .ref(`cards/${uid}`); 

    const cards = this.get('cards'); 

    databaseRef.on('child_added', data => { 
     const card = data.val(); 
     this.set(`cards.${card.key}`, card); 
    }); 

    databaseRef.on('child_changed', data => { 
     const card = data.val(); 
     this.set(`cards.${card.key}`, card); 
    }); 

    databaseRef.on('child_removed', data => { 
     const card = data.val(); 
     const cards = this.get('cards'); 
     delete cards[card.key]; 
     this.set('cards', cards); 
    }); 
    } 

、

{{#each-in cards as |key card|}} 
    {{card-item 
    card=card 
    }} 
{{/each-in}} 

cardsオブジェクトに新しいカードが追加されたときに問題なく動作しています。しかし、delete this.get('cards')[card.key]を使ってオブジェクトからカードを削除すると、リストは再描画されません。

私は、データソースが、child_removedイベントがトリガーされた後でカードの状態をログアウトすることによって変更されることを確認しました。

何か不足していますか？

更新

私はそれを作ることができ、それに深いクローンcardsオブジェクトを再割り当てして、テンプレートを再レンダリングしますが、全体のカードリストが再レンダリングを取得する必要があるため、それはかなり高価です。

databaseRef.on('child_removed', data => { 
    const card = data.val(); 
    const cards = this.get('cards'); 
    delete cards[card.key]; 

    const cardsStr = JSON.stringify(cards); 
    this.set('cards', JSON.parse(cardsStr)); 
}); 

Answer 1

あなたはnotifyPropertyChangeを呼び出すことができます。

delete cards[card.key]; 
cards.notifyPropertyChange(card.key); 

Answer 2

{{＃各イン}}ヘルパーがそれに渡されたオブジェクトにプロパティの変更を観察していません。上記の例では、コンポーネントのレンダリング後にコンポーネントのcategoriesプロパティにキーを追加すると、テンプレートは自動的には更新されません。

オブジェクトを追加、削除、または変更した後にコンポーネントを再レンダリングさせるには、コンポーネントのプロパティを再度設定するか、または手動で再レンダリングをトリガする必要があります。再レンダリングを介したコンポーネント（）：

は古いガイドを参照してください：https://guides.emberjs.com/v2.6.0/templates/displaying-the-keys-in-an-object/#toc_re-rendering

あなたがコンポーネントである場合、あなたはルクスが述べたように、あなたがnotifyPropertyChangeを呼び出すことができ、他のrerenderを呼び出すことができます。