Componentes Ember.js

Ember.js es un marco de código abierto que se utiliza para crear aplicaciones web modernas de forma rápida y sencilla. Sigue la estructura MVC para su aplicación. Ember.js también viene con una CLI para administrar su configuración. Los componentes de Ember.js permiten reutilizar los elementos o hacer que las plantillas sean reutilizables. Es una pieza de plantilla que puede tomar argumentos y poner los valores respectivos. Por ejemplo, podemos pensar en una aplicación To-Do que usa el mismo componente para mostrar las tareas. Cada tarea tiene un cuadro y algo de texto en él. Podemos renderizar cualquier cosa según el contexto de nuestra aplicación.

Creando el proyecto: Ingrese el siguiente comando para crear un nuevo proyecto.

ember new components-tutorial-gfg

Estructura del proyecto: la estructura del proyecto debe ser similar a la siguiente.

La estructura de carpetas de la aplicación debería tener el siguiente aspecto.

Ahora ejecute el proyecto.

cd components-tutorial-gfg
ember serve

Después de que el proyecto se construya con éxito, navegue a la URL 

http://localhost:4200/

Debería recibir el siguiente resultado.

Ejemplo: en este ejemplo, crearemos un componente para nuestra aplicación Ember.js y luego mostraremos una lista de elementos que usan el componente.

A continuación se muestra la implementación paso a paso. 

Paso 1: crearemos una aplicación de una sola página, por lo que todo nuestro código se colocará en el archivo app\templates\application.hbs . Vamos a crear una aplicación de tareas pendientes. Entonces, nuestro archivo application.hbs contendrá los elementos para mostrar.

{{page-title 'Ember App'}}
<h1 id='title'>
  Ember App
</h1>
<div id='items'>
</div>
{{outlet}}

Paso 2: Diseñaremos nuestro código para que se vea mejor y muestre claramente las tareas.

body {
  margin: 2rem;
  background-color: rgb(22, 187, 64);
#title {
  text-align: center;
  color: aliceblue;
}
#items {
  margin: auto;
  width: 80%;
  height: 75vh;
  bottom: 5rem;
  background-color: white;
  border-radius: 10px;
  text-align: center;
  overflow-x: hidden;
  overflow-y: auto;
}

Ejecute el código anterior y debería ver un resultado similar al siguiente.

Paso 3:  mostraremos nuestras tareas pendientes utilizando el mismo componente. Ember proporciona un comando para crear fácilmente componentes para nuestras páginas web. Ejecute el siguiente comando en la terminal para crear un componente de tarea.

ember generate component task

Espere a que el comando genere los archivos necesarios. Después de crear los archivos, vaya a app\components\task.hbs e ingrese el siguiente código. Estamos creando el componente para la tarea. Tomará una tarea y una descripción como argumentos. Los hemos colocado dentro de un elemento div porque queremos darle estilo al componente.

Por lo tanto, la sintaxis para tomar argumentos es {{@task}}.

<div class='task-item'>
  <h4>
    {{@task}}
  </h4>
    
<p>{{@description}}</p>
  
</div>

Agregue el siguiente código al archivo app\styles\app.css .

.task-item {
  margin: 2rem;
  padding: 5px 20px;
  background-color: bisque;
  border-radius: 10px;
}

Paso 4:  ahora estamos pasando algunas tareas al componente de tareas. No necesitamos importar ningún archivo al archivo application.hbs. Simplemente cree un elemento del componente y pase los valores como se muestra en el siguiente ejemplo.

{{page-title 'Ember App'}}
<h1 id='title'>
  Ember App
</h1>
<div id='items'>
  <Task @task='GeeksforGeeks' @description='Data Structures' />
  <Task @task='GeeksforGeeks' @description='Web Development' />
  <Task @task='GeeksforGeeks' @description='Machine Learning' />
  <Task @task='GeeksforGeeks' @description='Competitive Programming' />
  
</div>

Paso 5: Aquí está el código completo para CSS . No necesitamos importar el archivo CSS al componente task.hbs . Todo funciona automáticamente en Ember.js .

body {
  margin: 2rem;
  background-color: rgb(22, 187, 64);
}
#title {
  text-align: center;
  color: aliceblue;
}
#items {
  margin: auto;
  width: 80%;
  height: 75vh;
  bottom: 5rem;
  background-color: white;
  border-radius: 10px;
  overflow-x: hidden;
  overflow-y: auto;
}
.task-item {
  margin: 2rem;
  padding: 5px 20px;
  background-color: rgb(131, 243, 164);
  border-radius: 10px;
}

Paso 6:  Es el componente de tarea que creamos. Asegúrese de que el código sea el mismo que en el siguiente ejemplo.

<div class='task-item'>
  <h4>
    {{@task}}
  </h4>
    
<p>{{@description}}</p>
  
</div>

Paso 7: Y luego podemos iniciar el servidor de desarrollo Ember ingresando este código en el símbolo del sistema:

ember serve

Producción:

Entonces podemos crear componentes muy fácilmente en Ember.js y también hemos usado el componente en nuestra página web. No necesitamos importar ningún archivo para usar los componentes. Todo funciona automáticamente en Ember.js, lo que hace que el desarrollo web en Ember sea muy fácil.