Maison > interface Web > js tutoriel > le corps du texte

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

Susan Sarandon
Libérer: 2024-10-30 09:58:27
original
532 Les gens l'ont consulté

How to Effectively Load Multiple Models on the Same Route in EmberJS?

EmberJS : chargement de plusieurs modèles sur le même itinéraire

Lors de l'utilisation d'EmberJS, vous pouvez rencontrer des situations dans lesquelles vous devez charger plusieurs modèles non liés sur le même itinéraire. Cela peut prêter à confusion, surtout si vous êtes nouveau dans les frameworks MVC côté client.

Attention :

Avant d'essayer de charger plusieurs modèles, tenez compte des points suivants :

  • L'itinéraire charge-t-il des données dynamiques basées sur un slug d'URL (par exemple, /books/:id) ? Si oui, ne chargez pas plusieurs modèles à partir du hook de modèle, car cela pourrait ignorer le hook de modèle et utiliser le modèle fourni, ce qui pourrait causer des problèmes.

Chargement de plusieurs modèles le cas échéant :

Si l'itinéraire n'a pas d'URL dynamique, vous pouvez renvoyer plusieurs modèles à partir du hook de modèle de l'itinéraire. Par exemple :

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

Chargement de plusieurs modèles avec des promesses :

Si la récupération de données implique des promesses, vous pouvez utiliser la méthode RSVP.hash dans le hook du modèle :

App.IndexRoute = Ember.Route.extend({
  model: function() {
    return Ember.RSVP.hash({
           model1: promise1,
           model2: promise2
    });
  }
});
Copier après la connexion

Chargement de modèles avec des données Ember :

Si vous utilisez Ember Data, vous pouvez trouver plusieurs modèles dans le crochet de modèle :

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

Approche alternative (plus adaptée à la gestion des itinéraires dynamiques) :

Au lieu de charger plusieurs modèles à partir du hook de modèle, vous pouvez utiliser les hooks setupController ou afterModel pour définir les propriétés du modèle sur le contrôleur :

Méthode de configuration du contrôleur :

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'});
  }
});
Copier après la connexion

Méthode après le modèle :

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'));
  }
});
Copier après la connexion

Cette approche garantit que les modèles sont disponible dans le hook setupController, où vous pouvez les attribuer en toute sécurité aux propriétés du contrôleur.

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!

source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Derniers articles par auteur
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal
À propos de nous Clause de non-responsabilité Sitemap
Site Web PHP chinois:Formation PHP en ligne sur le bien-être public,Aidez les apprenants PHP à grandir rapidement!