Plantillas 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. 

Plantillas Ember.js: las plantillas no son más que HTML simple con características de contenido dinámico. Si alguna vez se ha encontrado con el motor de visualización del manillar, es posible que la sintaxis sea casi la misma. Podemos usar CSS con las plantillas. La plantilla raíz de Ember.js es application.hbs. Entonces, las plantillas en Ember.js son solo manillares. Todas las plantillas ember.js se colocan dentro de la carpeta app\templates.

Plantilla CSS: El HTML está incompleto con CSS. El archivo CSS se coloca en app\styles\app.css. El CSS está automáticamente disponible para todas las plantillas de nuestros Componentes y Plantillas. 

Transferencia de datos: todos los datos que se pasan mediante el enlace del modelo se incluyen en las plantillas mediante la etiqueta {{ data }} . Aquí hay algunas otras etiquetas similares a las etiquetas auxiliares del manillar.

• {{data}} se utiliza para incluir los datos pasados.
• {{#each}} {{/each}} utilizado como bucle for para la lista de elementos de datos.
• {{#if}} {{/if}} se usa como bloque si.
• {{else}} utilizado como bloque else.

Ejemplo: En este ejemplo, pasaremos algunos datos a la plantilla raíz, app\templates\application.hbs y luego los mostraremos en consecuencia. También diseñaremos nuestro contenido dentro del archivo de plantilla usando el archivo CSS ubicado en app\styles\app.css. 

Crear un nuevo proyecto:

Paso 1: ingrese el siguiente comando para crear un nuevo proyecto de aplicación Ember.js .

ember new ember_templates_tutorial

La estructura del proyecto de nuestra aplicación es la siguiente.

Después de crear el proyecto, ejecute la aplicación ingresando el siguiente comando.

ember serve

Después de unos minutos, debería recibir el siguiente resultado en la Terminal/Símbolo del sistema.

Cuando reciba el resultado anterior en la Terminal, vaya al enlace http://localhost:4200/ y debería recibir el siguiente resultado en su navegador.

La función Model() es un gancho modelo. Es responsable de obtener o recuperar datos y proporcionarlos al archivo de plantillas. Luego, los datos se procesan en consecuencia. Así que vamos a proporcionar una lista de elementos para mostrar. 

Paso 2: Crea un nuevo archivo llamado application.js dentro de la carpeta app\routes. Este archivo nos proporcionará datos para representarlo dinámicamente dentro del archivo de plantilla application.hbs. En el archivo application.js, extenderemos la clase Route dentro de él. Luego exportaremos los datos como un modelo() para nuestro archivo application.hbs.

aplicación\rutas\aplicación.js

import Route from '@ember/routing/route';
  
export default class ApplicationRoute extends Route {
  async model() {
    return {
      items: [
        {
          name: 'Data Structures',
          link: 
'https://www.geeksforgeeks.org/data-structures/',
        },
        {
          name: 'Algorithms',
          link: 
'https://www.geeksforgeeks.org/fundamentals-of-algorithms/',
        },
        {
          name: 'Competitive Programming',
          link: 
 'https://www.geeksforgeeks.org/competitive-programming-a-complete-guide/',
        },
      ],
    };
  }
}

Paso 3: ahora en el archivo app\templates\application.hbs , ejecutaremos el bucle {{ #each }} similar al que ejecutamos en handlebars. Nuestro archivo application.hbs recibe los datos del modelo enviados por nuestro archivo de rutas en la carpeta de rutas que creamos. Así que ejecute el bucle para representar cada elemento que queremos mostrar.

aplicación\plantillas\aplicación.hbs

{{page-title "EmberTemplatesTutorial"}}
<div id="container">
  <h1>GeeksforGeeks</h1>
  {{#each @model.items as |item|}}
  
  <div class="item">
    <h3>{{item.name}}</h3>
    <a href="{{item.link}}" target="blank">Click Here</a>
  </div>
  
  {{/each}}
</div>
  
  
{{outlet}}

Paso 4: Los artículos también tendrán algunos estilos . Es el mismo CSS que usamos para diseñar nuestros sitios HTML. El estilo es su propia elección, pero aquí hay un pequeño código para el estilo básico. 

aplicación\estilos\aplicación.css

#container {
  margin-left: auto;
  margin-right: auto;
  width: 200px;
}
.item {
  background-color: rgb(148, 255, 175);
  width: 200px;
  margin: 0.5rem;
  border-radius: 10px;
  text-align: center;
}
.item:hover {
  background-color: rgb(96, 163, 113);
  transform: scale(1.1);
}
.item a:hover {
  color: white;
}

Paso 5: Guarda el código. Ember actualizará automáticamente la página web en el enlace http://localhost:4200/. El resultado será el siguiente.

Producción: