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

Question

我有一个自定义元素可以将项目添加到容器中。我有一个 "close" 功能，可以关闭容器并清除项目，以便用户可以开始添加新项目。这对于添加内容和关闭非常有效，但是当我尝试在自定义元素关闭后添加新项目时，模板似乎没有像我希望的那样更新。

这是我的自定义元素：

<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) 后不会添加任何新项目.

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

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

template doesn't update after resetting everything

aurelia