javascript - Ember.js 2.渲染页面后在后台延迟获取

Question

我有一个简单的页面“作者”，显示作者列表。

每个作者当然都有很多书，但在该页面(和 API)中我没有显示(/include )任何书籍数据。

在作者 route ，我有默认的 model():

model() {
  return this.store.findAll('author');
}

一切都很好。

现在我需要一些东西来偷懒(在后台)从其他 API(书籍 API)获取一些数据。

但我不希望此调用阻止我的作者页面渲染。因此，我有默认且快速的 beforeModel()、model() 和 afterModel()，无需任何提取(作者数据除外)。

仅在页面呈现后，我需要一些调用“api/books?author:1,2,3,4”的东西(可能是服务？) ,5..."

这样，当有人点击某个作者时，我的“商店”中就已经有这些书了(该书页中没有等待加载程序)。

如何做到这一点？

Answer 1

1。如果您想延迟加载和存储关系数据而不阻塞 UI:

如果您不想显示延迟加载的关系数据(在特殊的 hasMany-relationships 中)，我建议在 afterModel-hook 中这样做:

route.js:

  // ...

  afterModel(authors) {
    let lastPromise = new Promise(function(resolve) { resolve(); });
    authors.forEach(author => {
      lastPromise = lastPromise.then(() => {
        return author.get('books');
      });
    });
  },

  // ...        

2。如果您想延迟加载、存储和显示关系数据而不阻塞 UI:

有多种方法可以做到这一点。延迟加载数据时我更喜欢的一种方法如下:

首先，我创建一个组件来封装数据的显示和加载。在您的示例中，我将调用我的组件 book-shelf。

插入 DOM 后，我的组件想要显示它的书籍。请参阅以下代码。

component.js:

import Ember from 'ember';

const {
  get,
  computed,
  ArrayProxy,
  PromiseProxyMixin,
  inject: { service }
} = Ember;

const ArrayPromiseProxy = ArrayProxy.extend(PromiseProxyMixin);

export default Ember.Component.extend({
  // API:
  author: null,

  // Internal:
  store: service(),
  books: computed(
    'author.id',
    function() {
      if(!get(this, 'author.id')) {
        return [];
      }
      return ArrayPromiseProxy.create({
        promise: get(this, 'store').query('book', { authorId: get(this, 'author.id') })
      });
    }
  ),
});

在你的template.hbs中:

<div class="book-shelf">
  {{#if books.isFulfilled}}
    Books of {{author.name}}:
    <ul>
      {{#each books as |book|}}
        <li>{{book.name}}</li>
      {{/each}}
    </ul>
  {{else}}
    Loading... please wait...
  {{/if}}
</div> 

此方法将数组代理与 Promise 代理结合起来，以便像数组一样运行，同时还提供数据是否已加载的信息。

您可以将此组件用作 ember.js 中的每个组件:

{{book-shelf author=mySpecialAuthor}}