EmberJS - Router Multiple Models

È possibile definire più modelli utilizzando RSVP.hash , che utilizza gli oggetti per restituire le promesse.

Sintassi

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

Esempio

L'esempio seguente mostra come specificare più modelli per la visualizzazione dei dati utilizzando RSVP.hash . Crea un nuovo modello come specificato nei capitoli precedenti. Qui abbiamo creato due modelli come noleggio e recensione in app / models / .

Ora apri il file rental.js e fornisci i suoi attributi -

import DS from 'ember-data';

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

Ora apri il file review.js e fornisci i suoi attributi -

import DS from 'ember-data';

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

Puoi restituire sia i modelli di noleggio che quelli di revisione in un gancio del modello e visualizzarli nella pagina dell'indice (app / routes / index.js) utilizzando il codice indicato di seguito -

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

Ora puoi accedere ai dati del modello nell'hash RSVP a cui fa riferimento il modello di indice, cioè nel file 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>

Il codice visualizza i dati dal database Firebase che è un database cloud che memorizza le informazioni in formato JSON. Pertanto, per utilizzare questo database, creare un account utilizzando il sito Web di Firebase .

Installa EmberFire per interfacciarti con i dati Firebase by Ember.

ember install emberfire

Aggiunge EmberFire a package.json e firebase a bower.json .

Configurazione di Firebase

Accedi all'account Firebase e fai clic sul pulsante CREA NUOVO PROGETTO . Fornisci lo stesso nome al progetto Firebase che viene assegnato a Ember all'applicazione.

Apri il file config / environment.js per aggiungere le informazioni di configurazione per l'applicazione Ember dal progetto che è stato creato sul sito web di 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

È necessario modificare la sezione Firebase definita nella sezione ENV . Fai clic sul progetto Firebase e fai clic sul pulsante Aggiungi Firebase alla tua app web per includere i campi apiKey, authDomain, databaseURL e storageBucket dal progetto firebase alla sezione firebase forniti nel file environment.js . Dopo aver configurato EmberFire, riavviare il server per applicare le modifiche.

Ora importa i dati in Firebase utilizzando il file json. In questa app, abbiamo creato un file chiamato rentals.json che contiene i dati in formato 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"
   }]
}

Vai alla console Firebase, fai clic sulla sezione Database e seleziona la scheda Dati .

Fare clic sui tre punti a destra e selezionare l' opzione Importa JSON . Quindi, sfoglia il file json che hai creato e fai clic sul pulsante IMPORTA .

Ora imposta le autorizzazioni Firebase sul nuovo database. Vai alla scheda Regole e fai clic sul pulsante PUBBLICA per aggiornare json.

Modificando le regole, chiunque può leggere o scrivere nel tuo database.

Produzione

Esegui il server ember e riceverai il seguente output: