Enter Your Email Address to Watch This Lesson

Your link to unlock this lesson will be sent to this email address.

Unlock this lesson and all 983 of the free egghead.io lessons, plus get JavaScript content delivered directly to your inbox!

Existing egghead members will not see this. Sign in.

Ember Templating with HTMLBars

3:42 JavaScript lesson by

In this lesson, we will learn how templates work within Ember and how to use HTMLBars. This lesson will cover the connection between controllers and templates and how to use actions within templates as well.

Get the Code Now
click to level up

egghead.io comment guidelines


In this lesson, we'll go over some of the basics of Ember.js templates and how they work with controllers.

In this lesson, we'll learn how to use Ember templates and controllers for presenting information in our Ember application.

Let's get started by using Ember CLI to generate an application controller. This is the topmost rule in any given Ember application. The controller that we've generated will be responsible for controlling the state of this application at this root.

Let's go into our app folder, templates, and open up the template file for our application. Within this, we'll change this from, "Welcome to Ember" to, "Hello, Ember." We'll also remove outline. Now let's save it, and you'll see, "Hello, Ember" in the browser.

Next we'll open up our application controller file, and we're going to define the attribute on this controller called Name. Let's give it the value of World.

This change doesn't come readily apparent, but we're going to open back up our template for our application. To display its attribute value, we're going to change Ember to Name, surrounded by two sets of curly braces, and save.

We'll see that World is now showing in the browser. These curly braces output the value of Name from our controller.

Now let's learn about some conditional logic. Let's reopen our application controller. Let's define an attribute called ShowName and set it to True.

Now let's open back up our application template. Now we'll say if ShowName, and then close it out. Now we can reopen our application controller, and we're going to change ShowName to false. You'll notice the text has disappeared from the browser.

Let's open back up our application template. In addition to this, we can have our else conditional, which we'll add in and have it say, "Hello, Ember."

Now you'll see the text reappear in your browser with "Ember" instead of "World." In Ember, there is no such thing as an explicit like if not, statement, serve your type, if not, ShowName. This doesn't exist out of the box.

Or if you do something like if bang, that also won't work. Doesn't exist. But the semantic equivalent of if not is in less, and those of you who have used a language like Ruby may have already seen this before.

Now let's save, and we'll see the original "Hello World" message show right back up in our browser.

Now you have some basics of using Ember templates.

Joel's Head
Why are we asking?