Ember 2 Fundamentals
Ember Templating with HTMLBars
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.
[00:00] In this lesson, we'll learn how to use Ember templates and controllers for presenting information in our Ember application.
[00:07] 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.
[00:26] 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.
[00:48] 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.
[01:03] 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.
[01:22] We'll see that World is now showing in the browser. These curly braces output the value of Name from our controller.
[01:31] 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.
[01:53] 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.
[02:28] 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."
[02:51] 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.
[03:08] 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.
[03:25] Now let's save, and we'll see the original "Hello World" message show right back up in our browser.
[03:33] Now you have some basics of using Ember templates.