Comment charger plusieurs modèles non liés dans une seule route EmberJS ?

EmberJS : chargement de plusieurs modèles non liés dans une seule route

Lors de la construction d'une application EmberJS, il peut être nécessaire de charger plusieurs modèles de données non liées dans une seule route . Cette question examine les approches appropriées pour une telle tâche.

Considérations

Avant de se lancer dans le processus de chargement, il est crucial de déterminer si le renvoi de plusieurs modèles dans le hook de modèle est justifiable. Un scénario dans lequel cette approche est fortement déconseillée est celui où une route charge des données dynamiques basées sur un slug d'URL (par exemple, this.resource('foo', {path: ':id'})). Si vous tentez de charger plusieurs modèles dans de telles conditions, des problèmes potentiels surviennent lors de la création de liens vers l'itinéraire. Ember contournera le crochet de modèle et utilisera le modèle fourni lors de la liaison, ce qui entraînera un comportement incohérent puisque vous aviez prévu de récupérer plusieurs modèles mais n'en avez reçu qu'un.

Alternatives au chargement du crochet de modèle

Lors du chargement de plusieurs modèles dans un itinéraire où l'approche du hook de modèle n'est pas adaptée, envisagez les alternatives suivantes :

Dans setupController/afterModel Hook : Chargez les modèles supplémentaires dans le hook setupController ou afterModel. Cette approche vous permet de connecter manuellement les résultats à votre contrôleur si nécessaire. Cependant, notez que pour que cela fonctionne, vous devez renvoyer une promesse du hook afterModel lorsqu'il doit bloquer la transition comme le fait le hook model.

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

Dans le Model Hook de Route : Si plusieurs modèles non liés doivent être chargés et que l'itinéraire ne charge pas de données dynamiques, le hook de modèle peut être utilisé.

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

Utilisation des promesses : Lorsque le chargement de modèles implique des requêtes asynchrones ( par exemple, des appels au serveur), emploient des promesses pour résoudre ces opérations et renvoient les modèles résultants dans le hook de modèle.

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

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!