Comment charger efficacement plusieurs modèles sur la même route dans 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']
    };
  }
});

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

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

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

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

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!