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> neveropen 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:
