Uwaga:

Chcesz być ostrożny, czy zwracanie wielu modeli w hooku modelu jest odpowiednie. Zadaj sobie to proste pytanie:

1. czy Moja trasa ładuje dynamiczne dane na podstawie adresu url za pomocą slug :id? tj. this.resource('foo', {path: ':id'});

Jeśli odpowiedziałeś tak

Nie próbuj ładować wielu modeli z haka modelu na tej trasie!!! powodem jest sposób, w jaki Ember obsługuje połączenia z trasami. Jeśli podasz model podczas łączenia się z tą trasą ({{link-to 'foo' model}}, transitionTo('foo', model)) pominie hak modelu i użyje dostarczonego modelu. Jest to prawdopodobnie problematyczne, ponieważ oczekiwano wielu modeli, ale tylko jeden model zostanie dostarczony. Oto alternatywa:

Zrób to w setupController/afterModel

App.IndexRoute = Ember.Route.extend({
  model: function(params) {
    return $.getJSON('/books/' + params.id);
  },
  setupController: function(controller, model){
    this._super(controller,model);
    controller.set('model2', {bird:'is the word'});
  }
});

Przykład: http://emberjs.jsbin.com/cibujahuju/1/edit

Jeśli potrzebujesz go, aby zablokować przejście (tak jak robi to hook modelu), zwróć obietnicę z afterModel hook. Będziesz musiał ręcznie zachować śledź wyniki z tego haka i podłącz je do kontrolera.

App.IndexRoute = Ember.Route.extend({
  model: function(params) {
    return $.getJSON('/books/' + params.id);
  },
  afterModel: function(){
    var self = this;
    return $.getJSON('/authors').then(function(result){
      self.set('authors', result);
    });
  }, 
  setupController: function(controller, model){
    this._super(controller,model);
    controller.set('authors', this.get('authors'));
  }
});

Przykład: http://emberjs.jsbin.com/diqotehomu/1/edit

Jeśli odpowiedziałeś Nie

Śmiało, zwróćmy wiele modeli z haka modelu trasy:

App.IndexRoute = Ember.Route.extend({
  model: function() {
    return {
           model1: ['red', 'yellow', 'blue'],
           model2: ['green', 'purple', 'white']
    };
  }
});

Przykład: http://emberjs.jsbin.com/tuvozuwa/1/edit

App.IndexRoute = Ember.Route.extend({
  model: function() {
    return Ember.RSVP.hash({
           model1: promise1,
           model2: promise2
    });
  }
});

Przykład: http://emberjs.jsbin.com/xucepamezu/1/edit

W przypadku danych Ember

App.IndexRoute = Ember.Route.extend({
  var store = this.store;
  model: function() {
    return Ember.RSVP.hash({
           cats: store.find('cat'),
           dogs: store.find('dog')
    });
  }
});

Przykład: http://emberjs.jsbin.com/pekohijaku/1/edit

App.IndexRoute = Ember.Route.extend({
  var store = this.store;
  model: function() {
    return Ember.RSVP.hash({
           cats: store.find('cat'),
           dogs: ['pluto', 'mickey']
    });
  }
});

Przykład: http://emberjs.jsbin.com/coxexubuwi/1/edit

Mieszaj i dopasuj i baw się dobrze!

App.IndexRoute = Ember.Route.extend({
  var store = this.store;
  model: function() {
    return Ember.RSVP.hash({
           cats: store.find('cat'),
           dogs: Ember.RSVP.Promise.cast(['pluto', 'mickey']),
           weather: $.getJSON('weather')
    });
  }, 
  setupController: function(controller, model){
    this._super(controller, model);
    controller.set('favoritePuppy', model.dogs[0]);
  }
});

Przykład: http://emberjs.jsbin.com/joraruxuca/1/edit

Używam czegoś takiego jak odpowiedź, którą podał Marcio, ale wygląda to mniej więcej tak:

    var products = Ember.$.ajax({
        url: api + 'companies/' +  id +'/products',
        dataType: 'jsonp',
        type: 'POST'
    }).then(function(data) {
        return data;
    });

    var clients = Ember.$.ajax({
        url: api + 'clients',
        dataType: 'jsonp',
        type: 'POST'
    }).then(function(data) {
        return data;
    });

    var updates = Ember.$.ajax({
        url: api + 'companies/' +  id + '/updates',
        dataType: 'jsonp',
        type: 'POST'
    }).then(function(data) {
        return data;
    });

    var promises = {
        products: products,
        clients: clients,
        updates: updates
    };

    return Ember.RSVP.hash(promises).then(function(data) {
      return data;
    });  

Jeśli używasz danych Ember, staje się to jeszcze prostsze dla niepowiązanych modeli:

import Ember from 'ember';
import DS from 'ember-data';

export default Ember.Route.extend({
  setupController: function(controller, model) {
    this._super(controller,model);
    var model2 = DS.PromiseArray.create({
      promise: this.store.find('model2')
    });
    model2.then(function() {
      controller.set('model2', model2)
    });
  }
});

Jeśli chcesz odzyskać właściwość obiektu tylko dla model2, Użyj DS.PromiseObject zamiast DS.PromiseArray :

import Ember from 'ember';
import DS from 'ember-data';

export default Ember.Route.extend({
  setupController: function(controller, model) {
    this._super(controller,model);
    var model2 = DS.PromiseObject.create({
      promise: this.store.find('model2')
    });
    model2.then(function() {
      controller.set('model2', model2.get('value'))
    });
  }
});

Najnowsza wersja JSON-API zaimplementowana w Ember Data v1.13 bardzo dobrze obsługuje łączenie różnych zasobów w tym samym żądaniu, jeśli nie masz nic przeciwko modyfikacji punktów końcowych API.

W moim przypadku mam session punkt końcowy. Sesja odnosi się do rekordu użytkownika, a Rekord użytkownika odnosi się do różnych modeli, które zawsze chcę ładować przez cały czas. To całkiem miłe, że to wszystko przychodzi z jedną prośbą.

Jedno zastrzeżenie na spec jest takie, że wszystkie zwracane podmioty powinny być w jakiś sposób powiązane z otrzymywanym podmiotem głównym. Wierzę, że ember-data będzie tylko przemierzać wyraźne relacje podczas normalizacji JSON.

W innych przypadkach, teraz wybieram odroczenie ładowania dodatkowych modeli, Dopóki strona nie zostanie już załadowana, tzn. dla oddzielnych paneli danych lub cokolwiek innego, więc przynajmniej strona jest renderowana tak szybko, jak to możliwe. Robiąc to, istnieje pewna strata/zmiana z" automatycznym " stanem ładowania błędów przemyślane.