すべてをリセットしてもテンプレートが更新されない

Question

アイテムをコンテナに追加するカスタム要素があります。私は、コンテナを閉じてアイテムをクリアする "クローズ"な機能を持っているので、ユーザーは新しいアイテムを追加することができます。これは、物を追加して閉じるのには効果的ですが、カスタム要素が閉じられた後に新しい項目を追加しようとすると、テンプレートは私の望むように更新されないようです。私は3つの項目を言う追加して、私は出力を得るカスタム要素を閉じた場合

constructor(itemDataConveyor) { 
     this.itemDataConveyor = itemDataConveyor; 

} 

close(event){ 
    event.stopPropagation(); 
    console.log('before' + this.itemDataConveyor.getItems()); 
    this.itemDataConveyor.clear(); 
    console.log('after' + this.itemDataConveyor.getItems()); 
    $('#item-wrapper').hide(); 
} 

：

を

<template> 
    <div id="item-wrapper"> 
     <div id="item-header"> 
      <div id="item-title">${itemTitle}</div> 
      <div id="item-close" click.trigger="close($event)">X</div> 
     </div> 
     <div style="display:none;">${itemDataConveyor.getItems()}</div> 
     <div repeat.for="item of itemDataConveyor.getItems()" class="item-container"> 
      ${item} 
     </div>    
    </div> 
</template> 

とJSの一部：

は、ここに私のカスタム要素です

before [item1],[item2],[item3] 
after 

開発者コンソールのデバッグで、アイテムが正しくクリアされて正しく追加されたことを確認しましたがテンプレートはアイテムを削除しないで、close(event)が呼び出された後に新しいアイテムを追加しません。

隠されたdiv要素は、いずれかの終了後に変更されません。..

Answer 1

私の仮定は、あなたがリピータ内itemDataConveyor.getItems()を呼び出すときにということである。

<div repeat.for="item of itemDataConveyor.getItems()" class="item-container"> 
    ${item} 
</div> 

あなたはアイテムのコピーを繰り返し処理しています。したがって、すべてのアイテムを削除しても、レンダリングされたものは変更されません。

<div repeat.for="item of items" class="item-container"> 
    ${item} 
</div> 

とあなたのビューモデルで：

constructor(itemDataConveyor) { 
    this.itemDataConveyor = itemDataConveyor; 
    this.items = this.itemDataConveyor.getItems(); 
} 

close(event){ 
    this.itemDataConveyor.clear(); 
    this.items = this.itemDataConveyor.getItems(); 
    $('#item-wrapper').hide(); 
}