我正在尝试了解如何使用多个数据源构建页面并在Ember中加载微调器。
让我们有这样的用户界面:
http://postimg.org/image/6i1ko340f/ (对不起,没有嵌入图片的声誉)
让我们说每个屏幕'模块'[书籍,节目,电影,推文]在远程API网址上都有一个单独的数据源。
为了简化并了解问题的本质,我要求 您不使用 :
你如何在Ember中设计这个,以便每个模块都有自己的微调器,并按照自己的速度加载(单独的路径挂钩?)。
请帮助我了解如何构建您的路线,控制器和模型,或其他任何优雅解决这个极为常见的问题的方法。我将在评论中附上我的一些方法和想法:)
答案 0 :(得分:0)
好吧,我不知道这是否是最好的办法,但这就是我解决这个问题的方法。虚假example使用超时而不是异步调用。
编写某种异步包装器。我在ic-ajax
ajax周围使用jQuery
包装器进行ajax调用,在我调用rest-client
的类中返回promise。为方便起见,我使用initializers
将此对象注入我的所有路由restClient
。您可以随时在需要时导入。
我通常会通过Ember.RSVP.hash()
来阻止我的模型检索,但我们假设我没有按照您的要求(这是我们的index
路线):
import bookModel from 'app/models/book-model';
setupController: function(controller, model){
var self = this;
//do this for each "module" call
this.restClient.get('books/url').then(function(response){
var booksController = this.controllerFor('booksTemplate');
//data is json for the properties of your Book model
var books = model.create(response.data);
booksController.set('isLoading', false);
booksController.set('model', books);
});
}
进行异步调用,并在成功时为模板的控制器设置模型。您的模板books.hbs
:
{{#if isLoading}}
<img src="spinner.gif">
{{else}}
{{#each}}
{{this.title}}
{{/each}}
{{/if}}
此模板显示微调器或加载时发生。请注意setupController
调用中我们在完成ajax调用时将isLoading
设置为false。这会导致显示else
块。
和你的books.js
控制器:
export default Ember.ArrayController.extend({
isLoading: true;
});
最后,你的index.hbs
:
{{render 'books'}}
{{render 'otherModel'}}
{{render 'anotherModel'}}
警告,如果使用render
部分渲染相同模板两次并且未指定模型,则两个模板共享控制器的单个实例,意味着isLoading
跨实例共享。霍勒,如果您有任何问题