Question

我遇到了一个问题，即我使用peekAll()在路由模型（）中加载大量记录。由于页面渲染目前需要2500毫秒，我已经有了一些渲染精简的视图，但它突出显示foo.loading状态似乎没有被触发，因为页面模板在没有加载显示的情况下单击2500ms的新链接时挂起现有链接。如何手动控制route.js文件中的foo.loading状态，以便加载模板呈现？

我的route.js文件中的以下代码目前正在尝试使用schedule在控制器上设置isRendering：

  model(params, transition) {
    const passedInOrgCode = transition.params.customers.org_code;
    const orgCode = passedInOrgCode !== undefined ? passedInOrgCode : this.get('currentUser.org.orgCode');

    if (orgCode !== this.get('currentUser.impersonatedOrg.orgCode')) {
      this.store.queryRecord('organisation', { org: orgCode }).then(org => {
        this.get('currentUser').impersonateOrg(org);
    }

    const peekData = this.store.peekAll('customer');

    let filterByOrg = (customers) => {
      return customers.filter((item) => {
        if (item.get('parentOrgCode') === orgCode || parseInt(orgCode) === ENV.APP.KORDIA_ORG_CODE) {
          return true;
        }
      });
    };

    if (peekData.get('content').length === 0) {
      return new Ember.RSVP.Promise((resolve, reject) => {
        this.store.query('customer', { orgCode: orgCode }).then((customers) => {
          resolve(filterByOrg(customers));
        }).catch(() => { reject(); });
      });
    } else {
      Ember.run(() => {
        this.controllerFor('customers.index').set('isRendering', true);
        return filterByOrg(peekData);
      });
      Ember.run.schedule('afterRender', () => {
        this.controllerFor('customers.index').set('isRendering', false);
      });
    }

  },

在我的车把文件中：

{{#if isRendering}}
  {{loading-component }}
  {{else}}
  {{customer-list customers=model updated=updated search=search orgCode=orgCode}}
{{/if}}

所有状态都以正确的时间触发控制台，但我无法获取视图以呈现加载状态。

Answer 1

[解决]

我必须将peekAll包装在带有Ember.run.later函数的RSVP promise对象中。答案是在异步路由文档中 - https://guides.emberjs.com/v2.12.0/routing/asynchronous-routing/#toc_the-router-pauses-for-promises。相关的代码如下：

if (peekData.get('content').length === 0) {
  return new Ember.RSVP.Promise((resolve, reject) => {
    this.store.query('customer', { orgCode: orgCode }).then((customers) => {
      resolve(filterByOrg(customers));
    }).catch(() => { reject(); });
  });
} else {
  return new Ember.RSVP.Promise(function(resolve) {
    Ember.run.later(function() {
      resolve(filterByOrg(peekData));
    });
  });
}

希望这有助于某人：）

Ember.js peekAll不会触发foo.loading

1 个答案: