Lit-элемент, который сортирует динамические c дочерние элементы - PullRequest
Новая
       35

Lit-элемент, который сортирует динамические c дочерние элементы

2 голосов
/ 14 января 2020

У меня есть 2 компонента с подсветкой. Родительский контент: 

<s-sortablelist>
${this.renderChildren()}
</s-sortablelist>

Функция renderChildren циклически перебирает свойство массива children = [1, 2] и создает элементы <div>. Отображаемая страница может выглядеть примерно так: 

<s-sortablelist>
  <div id="1"></div>
  <div id="2"></div>
</s-sortablelist>

Компонент sortablelist позволяет пользователю изменять порядок тегов <div> с помощью перетаскивания. После dnd визуализированный макет может стать (2 и 1 возвращены): 

<s-sortablelist>
  <div id="2"></div>
  <div id="1"></div>
</s-sortablelist>

После того, как пользователь изменил порядок, если я изменю свойство children=[3,4], результат будет отличаться от моих ожиданий:

  • Я ожидаю увидеть новый список с детьми 3,4
  • Я вижу список с 3,4 и некоторыми другими элементами (1, 2) в зависимости на операциях dnd, которые я делал до

Итак, мой вопрос, как это должно работать? Если массив дочерних элементов изменится, потому что это свойство, родительский компонент будет отображаться.

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

1 Ответ

5 голосов
/ 14 января 2020

Вы не можете изменить DOM под контролем LIT- html. lit- html помещает узлы комментариев в DOM, чтобы отслеживать, где находятся части шаблона Dynami c, и перемещая элементы вокруг, вы нарушаете бухгалтерию.

Правильный способ сделать это не перемещать узлы в операции перетаскивания, но прямо перед тем, как вы на самом деле изменили бы DOM, вместо этого измените данные, которые отображали DOM. Затем lit- html может отобразить список в новом порядке, но сохранить все узлы комментариев и другие внутренние данные в формате syn c.

.
...