Загрузка нескольких источников данных в Ember UI

Question

Я пытаюсь понять, как составить страницу с несколькими источниками данных и загрузкой роликов в Ember.

Давайте у вас есть пользовательский интерфейс, как это:

http://postimg.org/image/6i1ko340f/ (извините, не имеет репутации встраивать изображение)

И давайте говорить каждый экран «модуль» [книга, шоу, фильмы, чириканье ] имеет отдельный источник данных на удаленном URL-адресе 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

Ну, я не знаю, является ли это наилучшим способом любым способом, но так я подхожу к этой проблеме. Dummy example с использованием тайм-аутов вместо асинхронных вызовов.

Напишите своего рода асинхронную оболочку. Я использую обертку ic-ajax вокруг jQuery ajax, чтобы сделать вызовы ajax, которые возвращают обещания в классе, который я вызываю rest-client. Я использую 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, который мы установили isLoading в false при завершении вызова ajax. Это приводит к отображению блока else.

И ваш books.js контроллер:

export default Ember.ArrayController.extend({ 
    isLoading: true; 
}); 

И, наконец, ваш index.hbs:

{{render 'books'}} 
{{render 'otherModel'}} 
{{render 'anotherModel'}} 

Протест, если сделать один и тот же шаблон дважды с render частичным и не указать модель, два шаблона совместно используют один экземпляр контроллера, то есть isLoading является общим для всех экземпляров. Холлер, если у вас есть вопросы