Here is the flow.
I have a model with a hasMany
relationship. On a page with the model, I show the hasMany children as part of a component. The component is sent the model, which then sorts the children according to the sort
computed property and rendering them in an each loop {{#each sortedItems as |item|}}
.
When I first load the page with model, there are no children. Then, on that model, I open a model which calls a backend API action that takes the model and adds some children according to a script, taking those records and adding them to the store via the pushPayload
method. This also works just fine – i can see them in the store, and they are property related. The component then uses the new router
service to transitionTo
back to the original page so that I can see the new children added via the script. With me so far?
Now here is the problem: those new child hasMany records are not showing in the component as I would expect. I need to refresh the page for them to show up. However, if I change the reference in the component from the sortedItems
computed property to the direct model.children
reference then they do show up as expected.
This doesn’t appear to be a refresh/reload issue because the objects are there in the store. But I do think I"m missing something about how the computed property macro is kept up to date in a component.
Happy to answer questions, but hopefully that’s enough description…