모든 항목을 재설정 한 후에 템플릿이 업데이트되지 않습니다.

Question

컨테이너에 항목을 추가하는 맞춤 요소가 있습니다. 컨테이너를 닫고 항목을 지우는 "닫기"기능을 통해 사용자가 새 항목을 추가 할 수 있습니다. 이것은 물건을 추가하고 닫을 때 유용 합니다만, 사용자 정의 요소가 닫힌 후에 새 항목을 추가하려고하면 템플릿이 원하는대로 업데이트되지 않는 것 같습니다. 내가 3 개 항목을 말 추가 한 후 I 출력 얻을 사용자 정의 요소를 닫으면

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)이 호출 된 후 새 항목을 추가하지 않습니다.

숨겨진 사업부는 이후 변경되지 않는 가까운 하나 ..

Answer 1

내 가정은 당신이 당신의 중계기 내부 itemDataConveyor.getItems()를 호출 할 때이다 :

<div repeat.for="item of itemDataConveyor.getItems()" 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(); 
}