Unnecessary re-rendering of children #getter #aggregation

Help Requests
1

Hey folks,

right now I’m struggling with a problem in my application. I’m having an object with child objects and in one view I’m grouping the children to simplify the view. When clicking on the grouped view the contained children are showed. Right now I’m doing the grouping within a getter which is computedFrom(‘object.children’). So everytime the children changes somehow the getter will group the children and re-render everyhting including all children.

I guess the problem comes from my flux like implementation which creates a clone of the state every time a action is dispatched. While I created a dummy application to illustrate the problem I recognized that in an older version of Aurelia the problem that every children re-renders didn’t happen. Example on gist.run with same code but not having the problem.

A example of my problem you can see when running this sample application I’ve createed. Every time you change one property of any child or add a new child all other childs are re-rendered as well. I know that the objects are not the same but the content is.

Does anyone has an idea how to solve this problem?

Best
FragSalat

2

Lol it was kind of rubber duck style again. The solution to create my own matchers for those objects.

export class AnyCustomElement {
  items = [{id: 1},{id: 2},{id: 3}];

  itemMatcher(newItem, oldItem) {
    return newItem.id === oldItem.id;
  }
}

<template>
  <!-- Will not re-render the div until id is equal -->
  <div repeat.for="item of items" matcher.bind="itemMatcher">
    ${item.id}
  </div>
</template>
3 Likes