Wie lade ich mehrere Modelle auf derselben Route in EmberJS?

Laden mehrerer Modelle auf derselben Route in EmberJS

In EmberJS ist es manchmal notwendig, mehrere nicht verwandte Modelle in eine einzige Route zu laden . Dieses Konzept kann für Neulinge in clientseitigen MVC-Frameworks verwirrend sein. Zur Verdeutlichung bietet dieser Leitfaden eine detaillierte Erläuterung, wie mit diesem Szenario umzugehen ist und welche Vorgehensweise basierend auf der Abhängigkeit der Route von URL-Parametern angemessen ist.

Überlegungen zur Rückgabe mehrerer Modelle

Bevor mehrere Modelle im Modell-Hook zurückgegeben werden, ist es wichtig zu bestimmen, ob die Route dynamische Daten basierend auf einem Slug :id in der URL lädt. Wenn die Antwort „Ja“ lautet, sollte das Laden mehrerer Modelle vom selben Hook vermieden werden. Dies liegt daran, dass Sie mit dem Verknüpfungsmechanismus von Ember beim Übergang zur Route ein Modell angeben können, das den Modell-Hook umgeht und stattdessen das bereitgestellte Modell verwendet. Dies könnte zu Problemen führen, da Sie mehrere Modelle erwarten würden, aber nur eines verfügbar wäre.

Alternativer Ansatz, wenn die Route dynamische Daten lädt

Wenn die Route dynamisch geladen wird Um Daten basierend auf einem URL-Parameter zu erstellen, wird empfohlen, mehrere Modelle mit setupController/afterModel anstelle des Modell-Hooks zu laden.

Mit SetupController können Sie das Modell ändern, bevor der Controller erstellt wird. Damit können Sie dem Controller weitere Modelle hinzufügen. Zum Beispiel:

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

Mit AfterModel können Sie alle asynchronen Vorgänge ausführen, nachdem ein Modell geladen wurde. Sie können damit zusätzliche Modelle laden und Ember-Versprechen verwenden, um die asynchronen Anfragen zu verwalten. Zum Beispiel:

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

Mehrere Modelle zurückgeben, wenn die Route keine dynamischen Daten lädt

Wenn die Route keine dynamischen Daten basierend auf einem URL-Parameter lädt können Sie fortfahren und mehrere Modelle aus dem Modell-Hook der Route zurückgeben. Die Syntax ist unkompliziert:

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

Wenn das Laden des Modells Versprechen beinhaltet, können Sie Ember RSVP verwenden, um die asynchrone Natur der Anfragen zu verarbeiten. Verwenden Sie beispielsweise Ember Data:

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

Dieser Ansatz ermöglicht es Ihnen, mehrere Modelle gleichzeitig zu laden und sie als ein einzelnes Objekt in der Vorlage zu behandeln.

Das obige ist der detaillierte Inhalt vonWie lade ich mehrere Modelle auf derselben Route in EmberJS?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!