Ember.js 2.渲染页面后在后台进行延迟获取

Question

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

每个作者当然都有很多书 ，但是在那个页面（ 以及API中 ）我没有显示（ /包括 ）任何书籍数据。

在作者路线中，我有默认模型（）：

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

一切都很好。

现在我需要一些能够从其他API（书籍）中获取一些数据的懒惰 （ 在后台 ）。

但是我不希望这个调用阻止我的作者页面渲染。 所以，我有默认和快速的beforeModel() ， model()和afterModel()没有任何提取（作者数据除外）。

只有在页面呈现后，我需要一些东西（ 也许是一个服务？ ），称为“ api/books?author:1,2,3,4,5... ”

通过这种方式，当有人点击athor（在该书页中没有等待的加载器）时，我已经在我的“商店”中拥有了这些书。

这个怎么做？

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}}