List of objects no updating view when object changes

[deleteman]

Hi, I have a custom element inheriting from FASTElement that is using a template to render. The template iterates over an internal array of the class, this array contains a list of objects.
When I add new objects to the array, the view updated correctly, but when I update an attribute of one of the existing elements in the array the view doesn't change.

I've tried the "splice" method of updating the array, according to the documentation but the repeat directive doesn't seem to pick it up.
I've additionally set up an Observable on that array, and when I update the property, the callback does get triggered, but repeat seems to ignore it.

Here is the template I'm using, the className property is not getting updated.

template = html`
        ${repeat(x => x._todos,html`
            <fast-card>
                <fast-accordion id="todo-list">
                    <fast-accordion-item data-id="${x => x.id}"  collapsed-icon="👇" expanded-icon="🤐">
                        <span slot="heading">
                            <span id="task-desc-${x => x.id}" :className="${x => x.selected ? "done": "not-done"}">${x => x.text}</span>
                        </span>
                        <fast-button appearance="accent" onclick="endTask('${x => x.id}')">Mark as done</fast-button>
                    </fast-accordion-item>
                </fast-accordion>
            </fast-card>
            `
            )}
            `

How can I trigger the update on the repeat directive?

[EisenbergEffect]

Repeat only tracks changes in the array itself. It does not handle changes to properties on the items in the array. Those individual properties need to be either @attrs or @observables themselves for the individual bindings to detect changes. My guess is that selected is not observable in this case.

[EisenbergEffect]

If you have a vanilla JS object that you need to turn into an observable object, you can use this helper:

https://github.com/microsoft/fast/blob/master/packages/web-components/fast-element/src/state/reactive.ts#L34

FYI I no longer work for Microsoft. I left towards the end of 2022.

[vasicvuk]

Thank you :)

[vasicvuk]

@EisenbergEffect Sorry to bother you, I have tried with reactive, but it seems that repeat does not work with it. I printed the objects and those are now "proxied" with observe, but still, nothing happens when I make some changes to the objects.

[EisenbergEffect]

Unfortunately, I'm not able to help you further. I have another job that I'm responsible for these days. Hopefully another FAST maintainer can help you out more.

[vasicvuk]

Thank you anyway :), I raised the issue here: #6850 so I hope someone will help