显示过时项目的聚合物铁清单

Question

我有一个 iron-list 元素，里面有大约 500 个项目，并且实现了一个过滤功能（就像中的那个）。显示和过滤项目效果很好，除非我的过滤器变得过于严格：在这种情况下，显示的某些项目与当前过滤器不匹配，而是与之前的过滤器不匹配。据我了解 - 当 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）来更新元素，但没有任何效果。

除了手动删除备用虚拟元素之外，还有什么想法吗？

Answer 1

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

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

Answer 2

很明显，iron-list 为不应该可见的虚拟元素添加了一个 "hidden" 属性——我之前没有注意到这一点。

因此添加一个 CSS 指令，例如

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

解决了上面提到的问题。

显示过时项目的聚合物铁清单

Polymer iron-list showing outdated items

javascript

polymer

polymer-2.x