How to avoid custom elements reconstructed when containing array is sorted

iovergard · July 4, 2018, 8:18pm

I created a an example gist here:

gist.github.com

https://gist.github.com/iovergard/bee0058ef77b282c6597cab0e55c1663

app.html

<template>
  
  <require from="./card"></require>
  
  <button click.delegate="sortByName()">Sort alphabetically by name</button>
  <button click.delegate="sortByOldest()">Sort by oldest</button>

  <card repeat.for="person of people" model.bind="person"></card>

</template>

app.ts

export class App {
  people = [
    {
      name: "Bob",
      age: 33
    },
    {
      name: "Steve",
      age: 22
    },

This file has been truncated. show original

card.css

card {
  display: block;
}

There are more than three files. show original

My example has a list of cards representing a persons name and age. The cards can be sorted by age or name. Each card also has the most amazing feature that allows you to optionally make the card red. This state is stored on the card in the “styleString” property.

If you make each card red and then do a sort, you will notice some cards will become white. I think this happens when a card needs to be moved up in the array. In these cases it appears that the card custom element is removed and it is replaced with a new custom element, thus the “styleString” state is lost on the card.

I don’t really care if the item is temporarily removed and added from the DOM (I think that is probably necessary), but I’d like to keep an instance of the same object, rather than get a new element when doing sorting like this. Is that possible?

Topic		Replies	Views
Solved: How to refresh a CustomElement Help Requests	1	2436	July 5, 2019
Repeated Custom Elements do not release memory Help Requests	14	1200	February 27, 2020
Can you conditionally wrap a custom element's slot in a parent element? Help Requests	7	1535	August 5, 2019
@customElement and typescript types	2	515	February 20, 2021
Custom element bind() lifecycle` Help Requests	5	1206	February 9, 2019

How to avoid custom elements reconstructed when containing array is sorted

Related topics