- 当Ember并发任务称为Glimmer组件Getter时,它在无限环中运行。
import Component from '@glimmer/component';
import { tracked } from '@glimmer/tracking';
import { inject as service } from '@ember/service';
import { task } from 'ember-concurrency';
export default class UserTableComponent extends Component {
@service store;
@tracked users;
get taskStatus() {
let params = {
'account_id':this.args.account,
'page':this.args.page
}
this.getUsersTask.perform(params);
}
@task(function*(params) {
let recordsWithMeta = yield this.store.query('user', params);
this.users= recordsWithMeta.toArray();
}) getUsersTask;
}
用户table.hbs
<table>
<thead>
<tr>
<th>
<div class="first">Name</div>
</th>
</tr>
</thead>
<tbody>
{{#if this.taskStatus.isRunning}}
<tr>
<td >
<div class="h-64">
{{ui-kit/loader}}
</div>
</td>
</tr>
{{else}}
{{#each @users as |user|}}
{{/each}}
{{/if}}
</tbody>
</table>
上面的组件在模板和通过帐户和页面动态中的某个地方称为
<UserTable
@account={{this.account}}
@page={{this.page}}
>
</UserTable>
注意:它以无限循环运行。
我发现了两件事要更改。但不确定它们是否足以使其正常工作。
第一点,
{{#each @users as |user|}}
等于 this.args.users
。但是users
数组在组件上定义。因此必须更改为{{#each this.users as |user|}}
第二点,
taskStatus
没有返回任何东西。因此{{#if this.taskStatus.isRunning}}
每次都会为false
。正确的检查将是{{#if this.getUsersTask.isRunning}}
,因为isRunning
是任务的属性。
但是,当您更改为{{#if this.getUsersTask.isRunning}}
时,它将无法使用,因为没有人触发getUserTask
。我认为您可以在一个生命周期钩中启动该任务(例如didInsertElement
(。