显示过时物品的聚合物熨斗清单答案

【问题标题】：Polymer iron-list showing outdated items显示过时物品的聚合物熨斗清单
【发布时间】：2017-10-30 06:29:03
【问题描述】：

我有一个 Iron-list 元素，其中包含大约 500 个项目，并实现了一个过滤器功能（如 How to filter an iron-list in polymer 1.0? 中的那个）。显示和过滤项目效果很好，除非我的过滤器过于严格：在这种情况下，显示的某些项目与当前过滤器不匹配，但与之前的过滤器不匹配。据我了解 - 当 Iron-list 中的项目数量减少时 - 已创建的显示（虚拟）项目不会被删除。

示例：项目 {A, B, C, D, E, F, G, H, I} 匹配过滤器 X。iron-list 元素有 5 个虚拟元素（简化标记）：

<iron-list>
    <div>A</div>
    <div>B</div>
    <div>C</div>
    <div>D</div>
    <div>E</div>
</iron-list>

然后我将过滤器更改为 Y，只有 H 和 I 作为匹配项：更新后的标记如下所示：

<iron-list>
    <div>H</div>
    <div>I</div>
    <div>C</div>
    <div>D</div>
    <div>E</div>
</iron-list>

我预计 Iron-list 中只有两个 div 元素，但它似乎保持了恒定数量的虚拟化项目。我尝试通过调用 notifyResize() 和其他方法（参见 https://www.webcomponents.org/element/PolymerElements/iron-list/elements/iron-list）来更新元素，但没有任何效果。

除了手动删除多余的虚拟元素之外还有什么想法吗？

【问题讨论】：

标签： javascript polymer polymer-2.x

【解决方案1】：

显然，iron-list 为不应该可见的虚拟元素添加了一个“隐藏”属性——我之前没有注意到。

所以添加一个类似的 CSS 指令

#list .item[hidden] { display: none; }

解决了上面提到的问题。

【讨论】：

【解决方案2】：

我认为除了手动删除数组或使用 notifyResize 之外没有其他选择。显然我会选择第二个。

没有看到您的代码，我不知道为什么它对您不起作用，但here 是使用 notifyResize 的类似情况。

【讨论】：