Please see related twiddle https://ember-twiddle.com/e3872f1410e0d844b6d6c6bc9a2c9dc1
// models/parent.js
export default class extends Model {
@attr('string') name;
@hasMany('child') children;
}
// models/child.js
export default class extends Model {
@attr('string') name;
}
// routes/application.js
export default Route.extend({
model() {
return this.store.findAll('parent');
}
});
// routes/second-route.js
export default Route.extend({
model(params) {
return this.store.findRecord('parent', params.parent_id, {
include: 'children'
});
}
});
//templates/application.hbs
<div></div>
<LinkTo @route="second-route" @model=>
Go to second route with this model
</LinkTo>
//templates/second-route.hbs
<div></div>
<div>Nothing to display</div>
In the ember twiddle
- Click link to transition to second route
- Observe second route displays "Nothing to display"
- After 2 seconds, when the request completes, the template will update to display the hasMany models
I would have expected that the template is only rendered after the request to /parents/1
completes, but this is not the case
- Why does the template not wait for the route's model?
- How can I improve UX by detecting that the hasMany relationships are loading to display a loading indicator?
Flags on the promise proxies do not seem to change at any point
Aucun commentaire:
Enregistrer un commentaire