The First Template

In this lesson, we will make our first template for our Ember application.

We'll cover the following

Tuning

We have an app skeleton that Ember-CLI has created for us, so we can start adding functionality.

We can start the development server by typing ember s at the command line. This is short for ember server:

$ cd rarwe
$ ember s

This command first builds the whole client-side application, then launches the development server on port 4200. Thanks to the ember-cli-inject-live-reload package, it will also pick up any changes like file updates, additions, or deletions in the project files, run a syntax check (eslint) on them, and rebuild the app. If we run our server on our local computer and navigate to http://localhost:4200, we are presented with an empty page with a “Welcome to Ember” header. However, this URL will be different when we run our server on Educative. We will see how at the end of the lesson.

Now, let’s get acquainted with templates.

The first template

Templates are chunks of HTML with dynamic elements that get compiled by the application and inserted into the DOM. They are what build up the page and give it its structure.

To start off, let’s remove the “Welcome to Ember” header and paste in the following content instead:

{{!-- app/templates/application.hbs --}}
{{!-- removed code
<h2 id="title">Welcome to Ember</h2>
{{outlet}}
<ul> 
  --}}
  {{!-- Added Code --}}
<ul>
  {{#each
    (array
      (hash title="Black Dog" band="Led Zeppelin" rating=3)
      (hash title="Yellow Ledbetter" band="Pearl Jam" rating=4)
      (hash title="The Pretender" band="Foo Fighters" rating=2)
    ) as |song|
  }}
  <li>
    {{song.title}} by {{song.band}} ({{song.rating}})
  </li>
  {{/each}}
</ul>

Ember’s templating engine is called Glimmer, and it is compatible with a subset of the Handlebars templating language. Anything enclosed in mustaches ({{ … }}) is a dynamic expression. The first such expression is a helper, {{#each}}. It loops over the collection passed as the first argument and makes each item accessible inside the block with the name given after the as keyword. Technically, the removed {{outlet}} was the first such dynamic expression. It will be explained in the Routing chapter.

The array helper takes a varying number of arguments and creates an array to contain them.

The hash helper creates a Plain Old JavaScript Object (POJO) in templates. Putting these together, the song block variable will loop through each object created by the hash helper and render a list item for each of them.

We should see our rudimentary list of songs rendered on screen:

Note: The code below may take a while to run. When the server starts, go to the app URL, and you will see the output shown in the image above.

{{!-- {{page-title "Rarwe"}}

<h2 id="title">Welcome to Ember</h2>

{{outlet}} --}}

<ul>
  {{#each
    (array
      (hash title="Black Dog" band="Led Zeppelin" rating=3)
      (hash title="Yellow Ledbetter" band="Pearl Jam" rating=4)
      (hash title="The Pretender" band="Foo Fighters" rating=2)
    ) as |song|
  }}
  <li>
    {{song.title}} by {{song.band}} ({{song.rating}})
  </li>
  {{/each}}
</ul>

There’s also a page-title helper call, which was put into the template when the Ember-CLI generated the project. It sets the document title that is shown in the browser tab. Let’s make it more meaningful for our app:

{{!-- app/templates/application.hbs --}}
{{!-- {{page-title "Rarwe"}} --}}
{{page-title "Rock & Roll with Octane"}}
<ul>
  {{#each
    (array
      (hash title="Black Dog" band="Led Zeppelin" rating=3)
      (hash title="Yellow Ledbetter" band="Pearl Jam" rating=4)
      (hash title="The Pretender" band="Foo Fighters" rating=2)
    ) as |song|
  }}
  <li>
    {{song.title}} by {{song.band}} ({{song.rating}})
  </li>
  {{/each}}
</ul>

That looks better:

Let’s spiff up the list by adding some style in the next lesson.