Route @model argument value timing issue #18987
Description
We ran into a difference in behavior between @model and this.model that I'm not sure how to best describe but here is a twiddle that demonstrates the issue:
It seems that the value of @model changes to undefined before all of the components in the template have been destroyed. This is different than the behavior seen when using this.model, where the value remains until after all of the components in the template have been destroyed.
For example, if we return a value from the model hook:
// app/routes/index.js
export default class IndexRoute extends Route {
model() {
return {
firstName: 'Little',
lastName: 'Sebastian'
};
}
}And pass that value to a component in the route's template:
And try to access the value in the component's willDestroy lifecycle hook:
// app/components/person.js
import Component from '@glimmer/component';
export default class PersonComponent extends Component {
willDestroy() {
console.log({ person: this.args.person });
// => { person: undefined }
}
}Transitioning from the index route to another route causes the value of @model to become undefined by the time the willDestroy hook for the component runs.
This issue goes away of we instead pass the value to the component using this.model: