Defining an application template

To work with templates, we need to understand the basics on how properties bind with controllers and components. Here are a few recipes that go over how to accomplish this.

Getting ready

Before we get started, we'll need to generate a template.

1. We'll first create a new application using Ember CLI:

   $ ember new HelloWorldApp
   $ cd HelloWorldApp
   

   This command will generate a new application that we can use for this recipe.

2. Next, create a new route that will add a new template:

   $ ember g route helloworld
   

   This command will generate the template and routes file as well as unit tests. The template file is called helloworld.hbs and will be generated in the app/templates folder. The route file is called helloworld.js and is located in the app/routes folder. The route.js file will also get modified with the new helloworld route. We'll discuss more about routes in Chapter 4, Ember Router.

3. After this, we'll need to generate a controller:

   $ ember g controller helloworld
   

   This will generate a new file called helloworld.js in the app/controller folder and a unit test in tests/unit/controllers. We are now ready to continue.

How to do it...

Let's take a look at adding properties to our new template file.

1. Begin by editing the helloworld.hbs file. For this simple example, we'll create a string with the first and last name properties as follows:

   // app/templates/helloworld.hbs
   Hello World! My name is {{firstName}} {{lastName}}.
   {{outlet}}

   Handlebar expressions are surrounded by double curly braces {{ }} and backed by a context. A context is an object from which Handlebar expressions read their properties. In this example, the context is the controller. The {{outlet}} will render the template of any nested routes, which will be discussed in more detail later.

2. The controller will need to have the firstName and lastName properties so that they can be displayed in the template:

   // app/controllers/helloworld.js
   import Ember from 'ember';
   
   export default Ember.Controller.extend({
       firstName: 'Erik',
       lastName: 'Hanchett'
   });

   The controller has the same name as the template. The template, by convention, will retrieve the properties from the controller of the same name. Each of them is bound to each other. If any changes occur to the data, the other values will change.

Using templates with components

Similar to controllers, we can create a component that can act as a context for the template. In the component, we can set up properties that can be accessed by the template later.

1. To create a new component, use the generate component command:

   $ ember g component hello-world
   

   All components must have a dash in their names. This command will create the hello-world.js file in the app/components/hello-world.js folder, a template file in the app/components/hello-world.hbs file, and an integration test file at tests/integration/components/hello-world-test.js.

2. Edit the hello-world.hbs file and add the hello world string:

   // app/templates/components/hello-world.hbs
   Hello World! My name is {{firstName}} {{lastName}}.
   {{yield}}

   The firstName and lastName parameters are retrieved from the component. The yield expression is used when the component is in the block form. We'll talk more about this in Chapter 6, Ember Components.

3. Add two properties to the component file, hello-world.js, the first one being firstName and the last one being lastName:

   // components/hello-world.js
   import Ember from 'ember';
   
   export default Ember.Component.extend({
       firstName: 'John',
       lastName: 'Smith'
   });

4. For the last part, all we need to do is add the component that we just created to one of our application.hbs files:

   // app/templates/application.hbs
   <h2 id="title">Welcome to Ember</h2>
   
   {{hello-world}}
   {{outlet}}

   The {{hello-world}} Handlebar expression adds the component to the application.hbs file. The hello-world template will then be rendered here. The {{outlet}} template will render the nested routes under the application route.

5. Start the Ember server and navigate to http://localhost:4200.
6. After the Ember server is started, open a web browser at localhost port 4200. The message on the screen will show Hello World! My name is John Smith.
7. Navigate to http://localhost:4200/helloworld and you'll be greeted with two messages. The message on the screen will show Hello World! My name is John Smith. Hello World! My name is Erik Hanchett.
8. When the helloworld route is loaded, the application template is displayed. The {{outlet}} template then gets rendered with the contents of the helloworld template file. This is why both messages are displayed. Remember that all routes are nested under the application route.

How it works...

Ember.js uses the Handlebars templating library. This library provides you with a way to do data binding between the component or controller, also known as a context, and the template. This data binding occurs in both directions. In other words, changes to the data in the component or controller will be reflected in the template. Changes in the template to the data will be reflected in the controller or component.

In the previous simple example, the firstName and lastName properties in the component were accessed in the template with double curly braces {{}}. This is known as a Handlebars expression. The template is just regular HTML with embedded Handlebar expressions. Ember compiles these templates later on during the build process.