javascript - Polymer 2 铁选择器选择的元素在 dom 更改元素顺序后不会更新

Question

我有一个组件，它有 4 个实例。

用户点击数字 2，产品 B 被选中。

当 dom 被重新排序时，稍后在他选择另一个选项后，组件卡 block 的这 4 个实例被重新排序(因为价格变化，所以这在流程中自动发生)一切都很好......除了因为所选元素(编号 2 )移至位置 1。

并且...继续选择第二个元素而不是产品 B!

用户界面显示选定的产品 D。

似乎聚合物 2 在重新绘制 DOM 时忽略了这个选定的属性。我怎样才能避免这种情况？

<iron-selector id="something-semantic" attr-for-selected="value" selected={{value}}>
    <template is="dom-repeat" items="[[filteredProductosCategorias]]" as="productoCategoria" id="productoTipo">
        <div class="card-brick" value="[[productCategoria.id]]" tabindex="1" on-keyup="_seleccionaCategoria">
        </div>
    </template>
</iron-selector>

选择坚持 DOM 顺序中先前选择的元素。我怎样才能使这个选定的值也更新don dom更改？

有什么建议可以解决这个问题吗？用户可能会感到困惑。

Answer 1

问题是 dom-repeat 不会重建内部的元素，因为那将是一个繁重的操作。它只是为子元素分配新值，这意味着iron-selector 不知道内容已更改。在示例中，您选择了第二个元素，重新排序后，它仍然是选定的第二个元素。

我对 _selectCategory 的作用感到困惑，因为如果它设置类别，那么您可能甚至不需要 iron-selector。我自己从未使用过该元素(也永远不会使用它，因为自己编写它很简单)。无论如何，如果您使用 _selectCategory 重新排序，则只需使用 this.set() 设置新的 value 属性即可。