Question

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

这是我的自定义元素：

<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

我已经通过开发者控制台调试检查了项目是否已正确清除并正确添加，但模板没有删除项目，并且在{{1}之后它没有添加任何新项目已被召唤。

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

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

1 个答案: