EmberJS: Comment charger plusieurs modèles sur la même route?

ATTENTION:

Vous voulez être prudent quant à savoir si ou non le renvoi de plusieurs modèles dans votre modèle de crochet est approprié. Posez-vous cette simple question:

1. Mon itinéraire chargement dynamique des données en fonction de l'url à l'aide d'une limace :id? c'est à dire
   this.resource('foo', {path: ':id'});

Si vous avez répondu oui

Ne tentez pas de charger plusieurs modèles à partir du modèle de crochet dans cette voie!!! La raison réside dans la façon de Braise poignées en les reliant à des itinéraires. Si vous fournir un modèle pour créer un lien vers cette voie ( {{link-to 'foo' model}} , transitionTo('foo', model)), il va sauter le modèle de crochet et d'utiliser le modèle fourni. C'est sans doute problématique, puisque vous attend plusieurs modèles, mais un seul modèle à être livrés. Voici une alternative:

Faire dans 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'});
  }
});

Exemple: http://emberjs.jsbin.com/cibujahuju/1/edit

Si vous avez besoin de bloquer la transition (comme le modèle hook) de retour d'une promesse de l' afterModel crochet. Vous devrez assurer le suivi manuel des résultats de crochet et crochet de votre contrôleur.

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'));
  }
});

Exemple: http://emberjs.jsbin.com/diqotehomu/1/edit

Si vous avez répondu non

Aller de l'avant, revenons-en plusieurs modèles à partir de la route de modèle de crochet:

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

Exemple: http://emberjs.jsbin.com/tuvozuwa/1/edit

Si c'est quelque chose qui doit être attendu (comme un appel au serveur, une sorte de promesse)

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

Exemple: http://emberjs.jsbin.com/xucepamezu/1/edit

Dans le cas de Braise Données

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

Exemple: http://emberjs.jsbin.com/pekohijaku/1/edit

Si l'on est une promesse, et l'autre ne l'est pas, c'est du tout bon, RSVP fera un plaisir de l'utiliser de la valeur

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

Exemple: http://emberjs.jsbin.com/coxexubuwi/1/edit

Mélanger et assortir et amusez-vous!

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]);
  }
});

Exemple: http://emberjs.jsbin.com/joraruxuca/1/edit

Si vous utilisez de Braise de Données, c'est encore plus simple pour les sans rapport avec les modèles:

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)
    });
  }
});

Si vous ne souhaitez récupérer une propriété de l'objet pour model2, utilisez DS.PromiseObject au lieu de 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'))
    });
  }
});