不能,我们将Ember并发任务放在闪烁的组件Getter中,该任务正在跟踪组件参数



- 当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(。

最新更新