Элемент, выбранный с помощью селектора железа Polymer 2, не обновляется после изменения порядка элементов в dom

Question

У меня есть компонент, который имеет 4 экземпляра.

Пользователь нажимает номер 2, выбирается продукт B.

Когда дом переупорядочивается, позже, после того, как он выберет другую опцию, эти 4 экземпляра компонента карты-кирпичи переупорядочены (потому что цена меняется, так что это происходит автоматически в потоке) все хорошо ... за исключением того факта, что выбранный элемент, который был номером 2, переместился в позицию 1.

и ... 2-й элемент продолжает выделяться вместо продукта 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-порядке. Как я могу сделать это выбранное значение, чтобы также обновить Дон Дом изменения ??

любое предложение, чтобы преодолеть эту проблему ?? пользователи могут быть сбиты с толку.

Answer 1

Проблема в том, что dom-repeat не перестраивает элементы внутри, потому что это будет тяжелая операция. Он просто присваивает новые значения дочерним элементам, что означает, что iron-selector не имеет ни малейшего представления о том, что содержимое изменилось. В этом примере вы выбрали второй элемент, и после повторной сортировки все еще выбран второй элемент.

Я запутался в том, что делает _selectCategory, потому что, если он устанавливает категорию, то вам, вероятно, даже не нужно iron-selector. Я никогда не использовал этот элемент сам (и никогда не использовал бы его, потому что самому написать это просто). В любом случае, если вы пересортируете, используя _selectCategory, то просто установите новое свойство value с помощью this.set().