将多个数据源加载到Ember UI中
我试图了解如何用多个数据源组成一个页面，并在Ember中加载旋转器。
让我们拥有这样的UI：
http://postimg.org/image/6i1ko340f/ (抱歉，没有嵌入图像的声誉)
假设每个屏幕“模块”--书籍、节目、电影、推特--在远程API url上都有一个独立的数据源。
- api/api/books.json
- api/api/hows.json
- api/api/books.json
- twitter.com/api/tweets.json
为了简化问题的本质，我要求--您不要使用--
- 1)组件
- 2)数据库(如Ember模型或Ember数据)，除非这是答案所必需的。
您将如何在Ember中架构这一点，以便每个模块都有自己的旋转器，并以自己的速度加载(单独的路由挂钩)。
请帮助我理解您将如何组成您的路线，控制器，模型，或其他任何东西，以优雅地解决这一极其常见的问题。我将在评论中附上我的一些方法和想法:)
回答 1
Stack Overflow用户
发布于 2014-10-10 20:54:09
嗯，我不知道这是否是最好的方法，但这就是我处理这个问题的方法。使用超时而不是异步调用的虚拟示例。
编写某种异步包装器。我在ajax周围使用ic-ajax包装器进行ajax调用，这些调用在我称为jQuery的类中返回承诺。为了方便起见，我使用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跨实例共享。如果你有什么问题就大声喊
https://stackoverflow.com/questions/26307325
复制相似问题
腾讯云开发者
