Question

我正在尝试了解如何使用多个数据源构建页面并在Ember中加载微调器。

让我们有这样的用户界面：

http://postimg.org/image/6i1ko340f/ （对不起，没有嵌入图片的声誉）

让我们说每个屏幕'模块'[书籍，节目，电影，推文]在远程API网址上都有一个单独的数据源。

somesite.com/api/books.json
somesite.com/api/shows.json
somesite.com/api/books.json
twitter.com/api/tweets.json

为了简化并了解问题的本质，我要求 您不使用 ：

1）组件
2）数据库（例如Ember Model或Ember Data）除非对答案至关重要。

你如何在Ember中设计这个，以便每个模块都有自己的微调器，并按照自己的速度加载（单独的路径挂钩？）。

请帮助我了解如何构建您的路线，控制器和模型，或其他任何优雅解决这个极为常见的问题的方法。我将在评论中附上我的一些方法和想法：）

Answer 1

好吧，我不知道这是否是最好的办法，但这就是我解决这个问题的方法。虚假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跨实例共享。霍勒，如果您有任何问题

将多个数据源加载到Ember UI中

1 个答案: