Modelos Ember.js

Ember.js es un marco de desarrollo web destinado a proyectos profesionales de desarrollo web. Crea aplicaciones en arquitectura MVC por defecto, lo que aumenta la eficiencia del trabajo realizado para mantener la estructura de la aplicación. Ember.js es un marco productivo que hace que el desarrollo y la creación de prototipos de aplicaciones sea más fácil y rápido. 

Modelos de Ember.js: un modelo es una clase que contiene las propiedades y características del objeto. Es muy similar a las clases utilizadas en lenguajes de programación como Java, C, C++, etc. Por ejemplo, queremos crear un modelo de una tienda que contenga los detalles de la tienda como lo que vende, los ingresos por día, el nombre de la tienda y muchos otros detalles. Luego necesitaremos crear las funciones para establecer y obtener los valores del modelo.

Vamos a crear un proyecto Ember.js en el que crearemos nuestro modelo llamado tienda. Tendremos una lista de tiendas con los mismos detalles

Crear un proyecto: 

Paso 1: Para crear un nuevo proyecto, ingrese el siguiente comando en su Terminal / Símbolo del sistema.

ember new models_tutorial

La estructura del proyecto es la siguiente.

Paso 2:  después de crear el proyecto, ejecútelo con el siguiente comando.

ember serve

Después de una compilación exitosa, navegue a la URL http://localhost:4200/ en su navegador y debería ver el siguiente resultado.

Paso 3:  Necesitamos pasar algunos datos a la página de la aplicación. Así que aquí están los datos preparados para usted. Tiene algunos nombres y categorías de tiendas. Cree un nuevo archivo dentro de la carpeta app\routes y asígnele el nombre application.js. Nos servirá de datos.

aplicación\rutas\aplicación.js

import Route from '@ember/routing/route';
  
export default class ApplicationRoute extends Route {
  async model() {
      return {
          title:"dasds",
          shops:[
              {
                  name:"Grand Sweet Shop",
                  category:"Sweet"
              },
              {
                  name:"Wonderful garments",
                  category:"Clothes"
              },
              {
                  name:"Vidya Bhandar",
                  category:"Books",
              }
                
          ]
        };
    }
}

Paso 4:  Ahora vamos a mostrar los datos del modelo en la página de nuestra aplicación. Ahora, para mostrar los datos en nuestra aplicación, sabemos que los datos son una lista de elementos similares. Así que usaremos each-helper de Ember.js, ya que nos permite recorrer la lista de elementos. Habrá un contenedor div para cada uno de los detalles de la tienda. Entonces finalmente modificaremos el CSS de nuestra aplicación. 

app\templates\application.hbs y app\styles\app.css

{{page-title "ModelsTutorial"}}
  
<h1>
    Welcome to GeeksforGeeks
</h1>
{{#each @model.shops as |shop|}}
    <div id="shop">
        <h3>{{shop.name}}</h3>
        <h5>{{shop.category}}</h5>
    </div>
      
{{/each}}
{{outlet}}

h1{
    text-align: center;
}
#shop{
    margin:4rem;
    padding:.5rem;
    background-color: #63ff95;
    border-radius: 10px;
    transition-duration:0.5s;
}
#shop:hover{
    transform: scale(1.1,1.1);
}

Salida: Guarde el código y aquí está el resultado.