Hey people.
At the moment I have a list of divs, being generated with repeat.for and contain significant level of children. Enough, so that I don’t want to keep re-rendering the entire node.
<div class="table-row" repeat.for="row of rows">
...lots of children...
</div>
User selects a key and list gets sorted by that key. For this, I use a getter function to keep the original data untouched (although the issue is still there, even without the this approach).
Despite no new table-row being inserted, and all that is needed is a simple re-order, repeat.for rebuilds everything from bottom up, as far as I observe (constructors are being called etc.). Are there any approaches I can employ here to prevent that from happening? Something like FlatList from react-native if that makes sense, where list items have unique, persistent keys and it prevents the need for constant re-renders. At the moment, as is, repeat.for is too expensive, despite being very intuitive to use.
Edit:
I think this issue perfectly describes the issue I am explaining: Repeat.for to support key (custom resolution strategy) · Issue #1264 · aurelia/aurelia · GitHub
The issue offers a workaround, which works, but it kills the opportunity to use a good feature like getter functions or other JS features like spread.