Open In App

How to use if, else and not statements in Ember.js ?

Improve
Improve
Like Article
Like
Save
Share
Report

Ember.js is a framework for web development. It makes the process of development and prototyping faster with its tools. We can create dynamic web pages with it. Based on the dynamic data, we may or may not want to display some data or some UI or modify the UI. So we will learn to use If, Else and Not in an Ember.js application.

Create the project

Step 1: Enter the following command in your Terminal or Command Prompt to create a new project.

ember new ember_tutorial

Project Structure: Your project structure may look as follows.

Project Structure

 

 

Approach: The idea for our example project is to pass some data to our template(handlebar) file. The handlebar will process the data and based on that it will display the same. 

Step 2: So let us create some data. Create a new file inside the app\routes folder and name it application.js. Here is a list of items with their availability as true or false.  We have exported the items with a model hook. In this way, we can pass data to template files in Ember.js. This is also the place where our application will fetch code from the database or elsewhere.

app\routes\application.js

Javascript




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,
        },
      ],
    };
  }
}


Step 3: This is our project data. Now let us implement the application.hbs file. Inside the application.hbs file, run an each-loop to list each item. Here we have first used #each helper to iterate over the list of items. Then we used {{#if condition}} with the item.available to check if the current item is available or not. If available, our item will have the class of available else we used {{else}} tag for the else part of the code. If the item is not available our item will have the class as not available. Next inside the app.css file, add the following code for the styling purpose.

HTML




<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}}


CSS




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


Step to run the application:  Run the project by running the following command on Terminal / Command Prompt.

ember serve

Output:

Step 4: Now let us implement the NOT in Ember.js. In ember, NOT is implemented as 

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

UNLESS is just the opposite of IF. We can also use ELSE inside the UNLESS. So we will put a text under each item to tell whether the item is available or not. 

app\templates\application.hbs 

HTML




{{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}}


Step to run the application:  Save the code again. Run the project by running the following command on Terminal / Command Prompt.

ember serve

Output:



Last Updated : 23 Nov, 2021
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads