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

Chargement de plusieurs modèles sur la même route dans EmberJS

Dans EmberJS, il est parfois nécessaire de charger plusieurs modèles non liés dans une seule route . Ce concept peut être déroutant pour les nouveaux arrivants dans les frameworks MVC côté client. Pour aider à clarifier, ce guide fournit une explication détaillée de la façon de gérer ce scénario et de l'approche appropriée à adopter en fonction de la dépendance de l'itinéraire aux paramètres d'URL.

Considérations relatives au renvoi de plusieurs modèles

Avant de renvoyer plusieurs modèles dans le hook de modèle, il est crucial de déterminer si la route charge des données dynamiques basées sur un slug :id dans l'URL. Si la réponse est oui, il convient d’éviter de charger plusieurs modèles à partir du même hook. En effet, le mécanisme de liaison d'Ember vous permet de spécifier un modèle lors de la transition vers l'itinéraire, ce qui contournerait le hook de modèle et utiliserait à la place le modèle fourni. Cela pourrait entraîner des problèmes, car vous vous attendriez à plusieurs modèles, mais un seul serait disponible.

Approche alternative lorsque l'itinéraire charge des données dynamiques

Si l'itinéraire charge des données dynamiques données basées sur un paramètre d'URL, il est recommandé de charger plusieurs modèles à l'aide de setupController/afterModel au lieu du hook de modèle.

SetupController vous permet de modifier le modèle avant la création du contrôleur. Vous pouvez l'utiliser pour ajouter des modèles supplémentaires au contrôleur. Par exemple :

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

AfterModel vous permet d'effectuer des opérations asynchrones après le chargement d'un modèle. Vous pouvez l'utiliser pour charger des modèles supplémentaires et utiliser les promesses Ember pour gérer les requêtes asynchrones. Par exemple :

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

Retour de plusieurs modèles lorsque l'itinéraire ne charge pas de données dynamiques

Si l'itinéraire ne charge pas de données dynamiques en fonction d'un paramètre d'URL , vous pouvez continuer et renvoyer plusieurs modèles à partir du crochet de modèle de l'itinéraire. La syntaxe est simple :

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

Si le chargement du modèle implique des promesses, vous pouvez utiliser Ember RSVP pour gérer la nature asynchrone des requêtes. Par exemple, en utilisant 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')
    });
  }
});

Cette approche vous permet de charger plusieurs modèles simultanément et de les gérer comme un seul objet dans le modèle.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!