EmberJS - Múltiples modelos de enrutador

Puede definir los modelos múltiples utilizando RSVP.hash , que usa los objetos para devolver las promesas.

Sintaxis

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

Ejemplo

El siguiente ejemplo muestra cómo especificar varios modelos para mostrar datos mediante RSVP.hash . Cree un nuevo modelo como se especifica en los capítulos anteriores. Aquí hemos creado dos modelos como alquiler y revisión en app / models / .

Ahora abra el archivo rental.js y proporcione sus atributos:

import DS from 'ember-data';

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

Ahora abra el archivo review.js y proporcione sus atributos:

import DS from 'ember-data';

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

Puede devolver los modelos de alquiler y revisión en un gancho de modelo y mostrarlos en la página de índice (app / routes / index.js) utilizando el código que se proporciona a continuación:

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

Ahora puede acceder a los datos del modelo en el hash RSVP al que se hace referencia en la plantilla de índice, es decir, en el archivo 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>

El código muestra datos de la base de datos de Firebase, que es una base de datos en la nube que almacena información en formato JSON. Por lo tanto, para hacer uso de esta base de datos, cree una cuenta utilizando el sitio web de Firebase .

Instale EmberFire para interactuar con los datos de Firebase by Ember.

ember install emberfire

Agrega EmberFire a package.json y firebase a bower.json .

Configurando Firebase

Inicie sesión en la cuenta de Firebase y haga clic en el botón CREAR NUEVO PROYECTO . Proporcione el mismo nombre al proyecto de Firebase que se le da a Ember la aplicación.

Abra el archivo config / environment.js para agregar la información de configuración para la aplicación Ember del proyecto que se ha creado en el sitio web de 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

Necesita cambiar la sección de base de fuego definida en la sección ENV . Haga clic en el proyecto Firebase y haga clic en el botón Agregar Firebase a su aplicación web para incluir los campos apiKey, authDomain, databaseURL y storageBucket desde el proyecto firebase a la sección firebase proporcionada en el archivo environment.js . Después de configurar EmberFire, reinicie el servidor para aplicar los cambios.

Ahora importe los datos a Firebase utilizando el archivo json. En esta aplicación, hemos creado un archivo llamado rentals.json que contiene los datos en 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"
   }]
}

Vaya a la consola de Firebase, haga clic en la sección Base de datos y seleccione la pestaña Datos .

Haga clic en los tres puntos del lado derecho y seleccione la opción Importar JSON . A continuación, busque el archivo json que ha creado y haga clic en el botón IMPORTAR .

Ahora configure los permisos de Firebase para la nueva base de datos. Vaya a la pestaña Reglas y haga clic en el botón PUBLICAR para actualizar json.

Al cambiar las reglas, cualquiera puede leer o escribir en su base de datos.

Salida

Ejecute el servidor ember y recibirá el siguiente resultado:

↰ Previous page