重置所有内容后，模板不会更新

Question

我有一个将项目添加到容器的自定义元素。我有一个“关闭”功能，关闭容器并清除项目，以便用户可以开始添加新项目。这适用于添加内容和关闭，但在自定义元素关闭后尝试添加新项目时，模板似乎不会像我想要的那样更新。

这里是我的自定义元素：

<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的某些部分：

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(); 
} 

如果我加说3项，然后关闭自定义元素我得到的输出：

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

我已经通过开发者控制台调试过，检查项目被正确清除并正确添加，但在调用close(event)之后，模板不会删除项目，也不会添加任何新项目。

隐藏的股利后不改变密切要么..

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(); 
}