EmberJS - Router Multiple Models

Você pode definir os vários modelos usando RSVP.hash , que usa os objetos para retornar as promessas.

Sintaxe

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

Exemplo

O exemplo abaixo mostra como especificar vários modelos para exibir dados usando RSVP.hash . Crie um novo modelo conforme especificado nos capítulos anteriores. Aqui nós criamos dois modelos como aluguel e avaliação em app / models / .

Agora abra o arquivo rental.js e forneça seus atributos -

import DS from 'ember-data';

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

Agora abra o arquivo review.js e forneça seus atributos -

import DS from 'ember-data';

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

Você pode devolver os modelos de aluguel e de avaliação em um gancho de modelo e exibi-los na página de índice (app / routes / index.js) usando o código fornecido abaixo -

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

Agora você pode acessar os dados do modelo no hash RSVP referenciado no modelo de índice, ou seja, no arquivo 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>

O código exibe dados do banco de dados Firebase, que é um banco de dados em nuvem que armazena informações no formato JSON. Portanto, para fazer uso deste banco de dados, crie uma conta usando o site do Firebase .

Instale o EmberFire para fazer interface com os dados Firebase by Ember.

ember install emberfire

Ele adiciona o EmberFire ao package.json e o firebase ao bower.json .

Configurando Firebase

Faça login na conta do Firebase e clique no botão CRIAR NOVO PROJETO . Forneça o mesmo nome ao projeto Firebase que é dado ao Ember o aplicativo.

Abra o arquivo config / environment.js para adicionar as informações de configuração para o aplicativo Ember do projeto que foi criado no site do 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

Você precisa alterar a seção firebase definida na seção ENV . Clique no projeto Firebase e clique no botão Adicionar Firebase ao seu aplicativo da web para incluir os campos apiKey, authDomain, databaseURL e storageBucket do projeto firebase para a seção firebase fornecida no arquivo environment.js . Depois de configurar o EmberFire, reinicie o servidor para aplicar as alterações.

Agora importe os dados para o Firebase usando o arquivo json. Neste aplicativo, criamos um arquivo chamado rentals.json que contém os dados no 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"
   }]
}

Acesse o console do Firebase, clique na seção Banco de dados e selecione a guia Dados .

Clique nos três pontos à direita e selecione a opção Importar JSON . Em seguida, navegue até o arquivo json que você criou e clique no botão IMPORTAR .

Agora defina as permissões do Firebase para o novo banco de dados. Vá para a guia Regras e clique no botão PUBLICAR para atualizar o json.

Ao alterar as regras, qualquer pessoa pode ler ou gravar em seu banco de dados.

Resultado

Execute o servidor ember, você receberá a seguinte saída -

↰ Previous page