EmberJS - Handlebars Basics

The Handlebars templating library allows building rich user interface by including static HTML and dynamic content, which can be specified in the double curly braces - {{}}.

Syntax

Ember.Controller.extend ({
   property1: value,
   property2: value,
   .....
   propertyn: valuen,
});

Example

The following example shows how to display properties from the application controller. Create a template called application.hbs under app/templates/ with the following code −

//displaying the values of firstSentence and lastSentence
Hello, <strong>{{firstSentence}} {{lastSentence}}</strong>!

Now create the controller with the same name (template file) to add the properties. The application.js file will be created under app/controller/ with the following code −

import Ember from 'ember';

export default Ember.Controller.extend ({
   //initializing values
   firstSentence: 'Welcome to',
   lastSentence: 'TutorialsPoint!'
});

Output

Run the ember server and you will receive the following output −

We will see the detail concept of Helpers in the Writing Helpers chapter.