Ember.js 2.呈现页面后延迟获取后台
Ember.js 2.呈现页面后延迟获取后台
提问于 2017-06-27 10:30:51
我有一个简单的页面" authors “，它显示了一个作者列表。
当然，每个作者都有许多图书，但是在那个页面(和API中)，我没有显示(/include)任何图书数据。
在作者路由中，我有默认的模型()：
model() {
return this.store.findAll('author');
}一切都很好。
现在，我需要一些从其他API(图书API)获取懒惰 (in后台)的数据。
但我不希望这个调用阻止我的作者页面呈现。因此，我拥有默认的、快速的beforeModel()、model()和afterModel()，不需要任何提取(除了作者的数据)。
只有在呈现页面之后，我才需要一些东西(可能是服务？)这叫"api/books?author:1,2,3,4,5...“
以这种方式，我已经在我的“商店”，当有人点击一个athor (没有等待装载机在那本书页)。
怎么做？
回答 1
Stack Overflow用户
发布于 2017-06-27 12:04:25
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> 这种方法将数组代理和允诺代理结合起来，以便像数组一样工作，同时也提供数据是否被加载的信息。
您可以将此组件用作ember.js中的每个组件：
{{book-shelf author=mySpecialAuthor}}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/44778052
复制相关文章
相似问题
腾讯云开发者
