EmberJS - Modèles de routeurs multiples

Vous pouvez définir plusieurs modèles à l'aide de RSVP.hash , qui utilise les objets pour renvoyer les promesses.

Syntaxe

Ember.Route.extend ({
   model() {
      return Ember.RSVP.hash({
         //code here
      })
   }
});

Exemple

L'exemple ci-dessous montre comment spécifier plusieurs modèles pour afficher des données à l'aide de RSVP.hash . Créez un nouveau modèle comme spécifié dans les chapitres précédents. Ici, nous avons créé deux modèles en location et en revue sous app / models / .

Ouvrez maintenant le fichier rental.js et fournissez ses attributs -

import DS from 'ember-data';

export default DS.Model.extend ({
   owner: DS.attr(),
   city: DS.attr()
});

Ouvrez maintenant le fichier review.js et fournissez ses attributs -

import DS from 'ember-data';

export default DS.Model.extend ({
   author: DS.attr(),
   rating: DS.attr(),
   content: DS.attr()
});

Vous pouvez renvoyer les modèles de location et de révision dans un seul crochet de modèle et les afficher sur la page d'index (app / routes / index.js) en utilisant le code ci-dessous -

import Ember from 'ember';

export default Ember.Route.extend ({
   model() {
   
      //The RSVP.hash methos is built with RSVP.js library that allows to load 
         multiple JavaScript promises 
      return Ember.RSVP.hash ({
         
         //Find the records for the given type and returns all the records of this type 
            present in the store
         rentals: this.store.findAll('rental'),
         reviews: this.store.findAll('review')
      });
   },
});

Vous pouvez maintenant accéder aux données du modèle dans le hachage RSVP référencé dans le modèle d'index, c'est-à-dire dans le fichier app / templates / index.hbs -

<h3>Members - City </h3>
<ul>
   {{#each model.rentals as |rental|}}
      <li>{{rental.owner}} - {{rental.city}}</li>
   {{/each}}
</ul>

<h3>Member Reviews </h3>
<ul>
   {{#each model.reviews as |review|}}
      <li>{{review.rating}} - {{review.content}} - by {{review.author}}</li>
   {{/each}}
</ul>

Le code affiche les données de la base de données Firebase qui est une base de données cloud qui stocke les informations au format JSON. Par conséquent, pour utiliser cette base de données, créez un compte en utilisant le site Web de Firebase .

Installez EmberFire pour s'interfacer avec les données Firebase by Ember.

ember install emberfire

Il ajoute EmberFire à package.json et firebase à bower.json .

Configurer Firebase

Connectez-vous au compte Firebase et cliquez sur le bouton CRÉER UN NOUVEAU PROJET . Donnez le même nom au projet Firebase que celui donné à l'application Ember.

Ouvrez le fichier config / environment.js pour ajouter les informations de configuration de l'application Ember à partir du projet qui a été créé sur le site Web Firebase.

module.exports = function(environment) {
   var ENV = {
      modulePrefix: 'super-rentals',
      environment: environment,
      rootURL: '/',
      locationType: 'auto',
      EmberENV: {
         FEATURES: {
            // Here you can enable experimental features on an ember canary build
            // e.g. 'with-controller': true
         }
      },

      firebase: {
         apiKey: "AIzaSyAqxzlKErYeg64iN_uROKA5eN40locJSXY",
         authDomain: "multiple-models.firebaseapp.com",
         databaseURL: "https://multiple-models.firebaseio.com",
         storageBucket: "multiple-models.appspot.com"
      },

      APP: {
         // Here you can pass flags/options to your application instance
         // when it is created
      }
   };
  
//other code here

Vous devez changer la section Firebase définie sous la section ENV . Cliquez sur le projet Firebase et cliquez sur le bouton Ajouter Firebase à votre application Web pour inclure les champs apiKey, authDomain, databaseURL et storageBucket du projet Firebase à la section Firebase fournie dans le fichier environment.js . Après avoir configuré EmberFire, redémarrez le serveur pour appliquer les modifications.

Importez maintenant les données dans Firebase à l'aide du fichier json. Dans cette application, nous avons créé un fichier appelé Rentals.json qui contient les données au format JSON.

{ "rentals": [{
   "owner": "Will Smith",
   "city": "San Francisco"
   }, {
      "owner": "John Davidson",
      "city": "Seattle"
   }, {
      "owner": "Shane Watson",
      "city": "Portland"
   }],
   
   "reviews": [{
      "author": "Will Smith",
      "rating": 4,
      "content": "Good Product"
   }, {
      "author": "John Davidson",
      "rating": 5,
      "content": "Nice Product"
   }]
}

Accédez à la console Firebase, cliquez sur la section Base de données et sélectionnez l' onglet Données .

Cliquez sur les trois points sur le côté droit et sélectionnez l' option Importer JSON . Ensuite, parcourez le fichier json que vous avez créé et cliquez sur le bouton IMPORT .

Définissez maintenant les autorisations Firebase sur la nouvelle base de données. Allez dans l' onglet Règles et cliquez sur le bouton PUBLIER pour mettre à jour json.

En modifiant les règles, n'importe qui peut lire ou écrire dans votre base de données.

Production

Exécutez le serveur de braises, vous recevrez la sortie suivante -