¿Cómo usar declaraciones if, else y not en Ember.js?

Ember.js es un marco para el desarrollo web. Hace que el proceso de desarrollo y creación de prototipos sea más rápido con sus herramientas. Podemos crear páginas web dinámicas con él. Según los datos dinámicos, es posible que deseemos o no mostrar algunos datos o alguna interfaz de usuario o modificar la interfaz de usuario. Entonces, aprenderemos a usar If, Else y Not en una aplicación Ember.js.

Crear el proyecto

Paso 1: Ingrese el siguiente comando en su Terminal o Símbolo del sistema para crear un nuevo proyecto.

ember new ember_tutorial

Estructura del proyecto: la estructura de su proyecto puede tener el siguiente aspecto.

Estructura del proyecto

Enfoque: la idea de nuestro proyecto de ejemplo es pasar algunos datos a nuestro archivo de plantilla (manillar). El manillar procesará los datos y, en función de eso, mostrará lo mismo. 

Paso 2: Así que vamos a crear algunos datos. Cree un nuevo archivo dentro de la carpeta app\routes y asígnele el nombre application.js. Aquí hay una lista de artículos con su disponibilidad como verdadero o falso. Hemos exportado los artículos con un modelo de gancho. De esta forma, podemos pasar datos a archivos de plantilla en Ember.js. Este es también el lugar donde nuestra aplicación obtendrá el código de la base de datos o de otro lugar.

aplicación\rutas\aplicación.js

import Route from '@ember/routing/route';
  
export default class ApplicationRoute extends Route {
  async model() {
    return {
      items: [
        {
          name: 'Milk',
          available: true,
        },
        {
          name: 'Eggs',
          available: true,
        },
        {
          name: 'Bread',
          available: true,
        },
        {
          name: 'Biscuits',
          available: false,
        },
      ],
    };
  }
}

Paso 3: Estos son los datos de nuestro proyecto. Ahora implementemos el archivo application.hbs . Dentro del archivo application.hbs, ejecute each-loop para enumerar cada elemento. Aquí hemos usado primero #each helper para iterar sobre la lista de elementos. Luego usamos {{#if condition}} con el elemento.disponible para verificar si el elemento actual está disponible o no. Si está disponible, nuestro artículo tendrá la clase de disponible más usamos la etiqueta {{else}} para la parte más del código. Si el artículo no está disponible, nuestro artículo tendrá la clase como no disponible. A continuación, dentro del archivo app.css , agregue el siguiente código para fines de estilo.

<ul class="items">
  {{#each @model.items as |item|}}
  <li>
    {{#if item.available}}
    <h4 class="available">
      {{item.name}}
    </h4>
    {{else}}
    <h4 class="notavailable">
      {{item.name}}
    </h4>
    {{/if}}
  </li>
  {{/each}}
</ul>
{{outlet}}

.items li {
  list-style: decimal-leading-zero;
}
.items li .available {
  color: green;
}
.items li .notavailable {
  color: red;
}

Paso para ejecutar la aplicación:   Ejecute el proyecto ejecutando el siguiente comando en Terminal / Símbolo del sistema.

ember serve

Producción:

Paso 4: Ahora implementemos NOT en Ember.js. En ember, NOT se implementa como 

{{#unless}}{{/unless}}

A MENOS que es justo lo contrario de SI. También podemos usar ELSE dentro de UNLESS. Así que pondremos un texto debajo de cada artículo para indicar si el artículo está disponible o no. 

aplicación\plantillas\aplicación.hbs 

{{page-title 'EmberTutorial'}}
<h2>
  GeeksforGeeks Ember Tutorial
</h2>
<ul class="items">
  {{#each @model.items as |item|}}
  <li>
    {{#if item.available}}
    <h4 class="available">
      {{item.name}}
    </h4>
    {{else}}
    <h4 class="notavailable">
      {{item.name}}
    </h4>
    {{/if}}
    {{#unless item.available}}
    <p>
      Not Available
    </p>
    {{else}}
    <p>
      Available
    </p>
    {{/unless}}
  </li>
  {{/each}}
</ul>
{{outlet}}

Paso para ejecutar la aplicación:  Guarde el código nuevamente. Ejecute el proyecto ejecutando el siguiente comando en Terminal / Símbolo del sistema.

ember serve

Producción: