EmberJS: Wie lade ich mehrere Modelle auf derselben Route?

VORSICHT:

Möchten Sie vorsichtig sein, über den ob oder nicht zurückgeben mehrerer Modelle im Modell von Haken angebracht ist. Fragen Sie sich selbst diese einfache Frage:

1. Tut meine route laden dynamischer Daten auf der Grundlage der url mit einem slug :id? also
   this.resource('foo', {path: ':id'});

Wenn Sie mit ja beantwortet

Versuchen Sie nicht, laden Sie verschiedene Modelle aus dem Modell-Haken in dieser route!!! Der Grund liegt in der Art und Weise Ember Griffe Verknüpfung zu Routen. Wenn Sie ein Modell, wenn Sie einen Link zu dieser Strecke ({{link-to 'foo' model}}, transitionTo('foo', model)) springt das Modell Haken und verwenden Sie das mitgelieferte Modell. Dies ist wahrscheinlich problematisch, da Sie voraussichtlich mehrere Modelle, aber nur ein Modell ausgeliefert wird. Hier ist eine alternative:

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

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

Wenn Sie es brauchen, um blockieren den übergang (wie das Modell hook macht) zurückzukehren ein Versprechen aus der afterModel Haken. Sie benötigen, um manuell verfolgen Sie die Ergebnisse aus, dass die Haken und Haken Sie Sie bis zur Steuerung.

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

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

Wenn Sie keine Antwort

Go ahead, lassen Sie uns zurück, mehrere Modelle von der route ist das Modell hook:

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

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

Wenn es etwas braucht, bedient zu werden (wie ein Aufruf an den server, eine Art Versprechen)

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

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

In der Fall of Ember-Daten

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

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

Wenn man ein Versprechen, und der andere nicht, es ist alles gut, melde dich gerne-nutzen Sie einfach den Wert

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

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

Mix und match und viel Spaß!

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

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

InformationsquelleAutor der Antwort Kingpin2k

Wenn Sie mit Ember-Data, wird es sogar noch einfacher für unabhängige Modelle:

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

Wenn Sie nur wollen, um eine Objekt-Eigenschaft für model2 verwenden DS.PromiseObject statt 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'))
    });
  }
});

InformationsquelleAutor der Antwort AWM