如何检测包含的关系是否正在加载
How to detect if included relationship is loading
请看相关教程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
{{#each this.model as |parent|}}
<div>{{parent.name}}</div>
<LinkTo @route="second-route" @model={{parent.id}}>
Go to second route with this model
</LinkTo>
{{/each}}
{{outlet}}
//templates/second-route.hbs
{{#each this.model.children as |child|}}
<div>{{child.name}}</div>
{{else}}
<div>Nothing to display</div>
{{/each}}
在 ember 中
- 点击link转换到第二条路线
- 观察第二条路线显示“Nothing to display”
- 2 秒后,当请求完成时,模板将更新以显示 hasMany 模型
我原以为模板只会在对 /parents/1
的请求完成后才呈现,但事实并非如此
- 为什么模板不等待路由的模型?
- 如何通过检测 hasMany 关系正在加载以显示加载指示器来改善用户体验?
promise 代理上的标志似乎在任何时候都没有改变
模板不会等待,因为在存储中找到了记录,因此承诺会立即解析。
我真希望有更好的 api,但我分叉了你的玩意并展示了一个解决方案:https://ember-twiddle.com/af0a823fc73474db1c09083c429fef4f?openFiles=models.parent%5C.js%2C&route=%2Fsecond-route%2F1
基本代码是这样的:
// app/model/parent.js
get childrenLoading() {
return this.hasMany('children').load().isPending;
}
this.hasMany('...')
是低级Ember数据api,returns是关系参考。如果尚未加载,load() 方法会导致它加载,但更重要的是,returns 一个将在加载关系时解析的承诺。
您可以在 api
中阅读有关 HasManyReference class 的更多信息
请看相关教程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
{{#each this.model as |parent|}}
<div>{{parent.name}}</div>
<LinkTo @route="second-route" @model={{parent.id}}>
Go to second route with this model
</LinkTo>
{{/each}}
{{outlet}}
//templates/second-route.hbs
{{#each this.model.children as |child|}}
<div>{{child.name}}</div>
{{else}}
<div>Nothing to display</div>
{{/each}}
在 ember 中
- 点击link转换到第二条路线
- 观察第二条路线显示“Nothing to display”
- 2 秒后,当请求完成时,模板将更新以显示 hasMany 模型
我原以为模板只会在对 /parents/1
的请求完成后才呈现,但事实并非如此
- 为什么模板不等待路由的模型?
- 如何通过检测 hasMany 关系正在加载以显示加载指示器来改善用户体验?
promise 代理上的标志似乎在任何时候都没有改变
模板不会等待,因为在存储中找到了记录,因此承诺会立即解析。
我真希望有更好的 api,但我分叉了你的玩意并展示了一个解决方案:https://ember-twiddle.com/af0a823fc73474db1c09083c429fef4f?openFiles=models.parent%5C.js%2C&route=%2Fsecond-route%2F1
基本代码是这样的:
// app/model/parent.js
get childrenLoading() {
return this.hasMany('children').load().isPending;
}
this.hasMany('...')
是低级Ember数据api,returns是关系参考。如果尚未加载,load() 方法会导致它加载,但更重要的是,returns 一个将在加载关系时解析的承诺。
您可以在 api
中阅读有关 HasManyReference class 的更多信息