Ember.js 2.渲染页面后的后台懒惰提取

Question

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

当然每个作者都有很多书，但在页面（和API中）我不显示（/包括）的任何一本书的数据。

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

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

，一切都OK。

现在我需要的东西是取（背景）懒惰从别人的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.如果你想懒洋洋地加载，存储和显示关系的数据，而不集团国王用户界面：

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

首先我创建一个封装了我的数据的显示和加载的组件。在你的例子中，我会打电话给我的组件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') }) 
     }); 
    } 
), 
}); 

而在你模板。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> 

这种方法结合了许代理阵列代理以像阵列，而且该数据是否被加载提供信息。

可以在ember.js使用该组件为每个组件：

{{book-shelf author=mySpecialAuthor}}