How to create an ember handlebars template ?

Last Updated : 25 Feb, 2022

Ember uses the handlebars template library to modify the app’s user interface. Handlebars are just like the HTML code but they give additional features to developers like adding expressions that can change the displaying page. We can use the other features of handlebars to get a clear idea of ember handlebars. Once you tell the ember to render the template that you have created then there is no need to write extra code because handlebars can handle that thing easily.

Steps:

Define Template: If you don’t use build tools then you can simply define your application’s template inside your HTML using a script tag.

The template is then compiled and becomes your application template when it loads.

HTML

<html> 
<body> 
    <script type="text/x-handlebars"> 
      Hello, <strong>{{first_Name}} {{last_Name}}</strong>! 
    </script> 
</body> 
</html> 

We can define the template by its name and can be used later on if required. This thing is helpful when we want o use the same code again and again in different places instead of writing that code, we can simply create a template by its name and use it whenever required. We use the data-template-name attribute to give a name to the template.

HTML

<html> 
<head> 
    <script type="text/x-handlebars" data-template-name="tempName"> 
      <div class="my-class1">{{first_Name}}</div> 
    </script> 
</head> 
</html>

HandleBars Expressions:

Each template has its own controller that can display anything by finding the property name.
We can print the property from the controller by wrapping the property name in braces. It will look for first_Name and last_Name properties and then put them into HTML DOM and displayed them.

Hii, <strong>{{first_Name}} {{last_Name}}</strong>!!!

By default, our application template is bound to our ApplicationController as shown below:

App.ApplicationController = Ember.Controller.extend({
  first_Name: "Dreke",
  last_Name: "Pirnick"
});

The above controller and template will display the HTML content as shown below:

Hii, <strong>Dreke Pirnick</strong>!!!

When our application size becomes large then we would be having more templates and each of them would be bound to different controllers.
When the template values change, then the HTML content will get updated automatically.