Ember.js Templates

Ember.js is a web development framework aimed at professional web development projects. It creates applications in MVC architecture by default which increases the efficiency of work done on maintaining the structure of the application. Ember.js is a productive framework that makes the development and prototyping of applications easier and faster. 

Ember.js Templates: Templates are nothing but simple HTML with dynamic content features. If you have ever encountered the Handlebar view engine, you may find the syntax almost the same. We can use CSS with the templates. The root template of Ember.js is application.hbs. So the templates in Ember.js are just handlebars. All ember.js templates are placed inside the app\templates folder.

Template CSS: The HTML is incomplete with CSS. The CSS file is placed at app\styles\app.css. The CSS is automatically available to all the templates of our Components and Templates. 

Passing Data: Any data passed using the model hook is included in templates using the {{ data }} tag. Here are some other tags similar to handlebars helper tags.

• {{data}} is used for including the data passed.
• {{#each}} {{/each}} used as a for-loop for list of data items.
• {{#if}} {{/if}} is used as if block.
• {{else}} used as else block.

Example: In this example, we will pass some data to the root template, the app\templates\application.hbs and then display that accordingly. We will also style our content inside the template file using the CSS file placed at app\styles\app.css. 

Create a new Project:

Step 1: Enter the following command to create a new Ember.js application project.

ember new ember_templates_tutorial

The project structure of our application is as follows.

After the project is created, run the application by entering the following command.

ember serve

After a few minutes, you should receive the following output on the Terminal / Command Prompt.

When you receive the above output on Terminal, go to the link http://localhost:4200/ and you should receive the following output on your browser.

Model() function is a model hook. It is responsible for fetching or retrieving data and providing it to the templates file. Then the data is rendered accordingly. So we are going to provide a list of items to display. 

Step 2: So create a new file called application.js inside the app\routes folder. This file will provide us data to render it dynamically inside the template file application.hbs file. In the application.js file, we will extend the Route class inside it. Then we will export the data as a model() for our application.hbs file.

app\routes\application.js

Javascript

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

Step 3: Now in the app\templates\application.hbs file, we will run the {{ #each }} loop similar to we run in handlebars. Our application.hbs file receives the model data sent by our routes file in the routes folder we created. So run the loop to render each item we want to display.

app\templates\application.hbs

HTML

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

Step 4: The items will also have some styles. It is the same CSS that we use to style our HTML sites. Styling is your own choice but here is a little code for basic styling. 

app\styles\app.css

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

Step 5: Save the code. Ember will automatically refresh the webpage at the link http://localhost:4200/. The result will be as follows.

Output: