Lesson 4

Templating with HTMLBars

29

⚠️ This tutorial uses an old version of Ember. Some things might have changed!

Switching to a POD structure

Before we go any further, we want to make sure that our Ember project uses a POD structure instead of the default one. You can read more about its advantages here, but for now you can just think of it as a better way to structure your app. It's especially useful if you want to break down your app into smaller components (like React.js does) instead of the traditional MVC structure. Moreover, it will probably become the default file structure for Ember apps in the future.

To use a pod structure, open the invisible file .ember-cli located in the root of your directory and add the line "usePods": true so that the final result looks like this:

.ember-cli

With this, we won't be needing some of the folders that Ember automatically created, so feel free to remove the folders app/controllers, app/routes and app/models.

Also, you should move the file app/templates/application.hbs inside a new folder (app/application) and rename it template.hbs in order to fully adhere to the new pod structure. After that, you can remove the templates folder.

Go back to the terminal, stop the server (ctrl+c ), restart it with ember server and localhost:4200 should still show "Welcome to Ember.js" as before. Alright, enough with the file meddling, let's start coding!

HTMLBars

Ember uses a templating language called HTMLBars, which is based on the very popular Handlebars-library by Yehuda Katz.

One of the advantages of using a real template engine instead of just adding "magic attributes" to your HTML elements (like in Angular) is that there's a clear distinction between the markup and the logic in your templates.

To get started, make sure you have a good text editor with Handlebars support so that the syntax highlighting works well. Personally, I use Sublime Text 3 together with the Handlebars package.

Let's play around with HTMLBars to see how it works! Open the file app/application/template.hbs in Sublime Text (or whatever text editor you use), and make sure you have ember server running in the background together with localhost:4200 open in your browser.

app/application/template.hbs

We'll get to what that {{outlet}} is soon. For now, try replacing the "Welcome to Ember.js" text with "Welcome to Chirper" and save the file.

Now go back to your browser window. Magic! Ember automatically detected a change in one of your project files (thanks to Watchman), and rebuilt the app in order to show the changes in your browser in real-time.

Next, we're going to show you how to add variables and display logic to your markup. Let's start by generating a controller for our application template.

Open a new terminal window (the one using ember server must always run in the background and shouldn't be touched), make sure you're in the chirper-directory and type:

Generating files through the ember command is very handy, and something that we will do very often throughout the course, so you can keep this second terminal window open as well.

Open the newly created file app/application/controller.js and add a variable called appName:

app/application/controller.js

Now go back to your Handlebars-file and change the text in order to use our new variable:

app/application/template.hbs

After Ember is done rebuilding the app again, you should still see the text "Welcome to Chirper" in your browser window, although now it's using a variable instead of just plain text! Cool!

Flow control

Besides variables, another purpose of controllers is to decide what to show and what not to show in our template, depending on the situation. Let's add a variable called showAppName in our controller. If it's true, we want our app to say "Welcome to Chirper", otherwise we just want to show "Welcome to Ember.js!"

Here's how we would code that in our template-file:

... and this is the controller:

Try toggling the value of showAppName and you should see the changes in your browser more or less instantly!

if-statements are the simplest forms of control logic that Ember templates have. In the upcoming chapters, we will also take a look at how to use loops.

Alright, now that you've got a taste of how HTMLBars works, let's actually add the stuff that we want for our Chirper app!

What makes the file application/template.hbs special is that it's the main template of your entire application. This means that everything you put here will appear on every single page of your app.

If we go back to our mockups, we can see that the only thing we want to have on all pages is the header, so let's go ahead and add the markup for it! (you can safely remove all the other code we added previously in our template)

app/application/template.hbs

Styling

So we've got the HTML elements there, but the page looks really boring and weird. Let's pimp it with some CSS!

You can very easily add your own CSS in app/styles/app.css, and it will be compiled as soon as you save the file just like your .hbs-files. However, when building large apps it's preferable to use some kind of CSS preprocessor in order to make your stylesheets more maintainable.

The most popular CSS-preprocessor today is SCSS (a.k.a. SASS), so that's what we'll be using. If you've never used SCSS before, just think of it as regular CSS but with some useful extra features like nested tags and variables.

Here's the best part: adding support for SCSS to your Ember project is super easy! Just bring up that terminal window where you previously generated a controller and this time type:

Once it's done, change the name of the file inside the app/styles-folder from app.css to app.scss. After that, restart the Ember server again (remember, CTRL+C then ember server). Alright, now you're ready to use SCSS!

SCSS allows you to easily split up your stylesheets, so let's create a new file called header.scss in the styles-folder (we'll import it into app.scss later):

Since this isn't a CSS-tutorial, we won't go through exactly how the stylesheets work, you can just copy-paste the content into the file:

We'll also create a file called layout.scss for our layouts and another one called ui.scss that styles some basic HTML elements.

app/styles/layout.scss
app/styles/ui.scss

Since we have everything nicely separated now, the sole purpose of the default app.scss-file will be to import all the other files:

app/styles/app.scss

In the next chapter, we're going to add some more pages to our app!

I found making .page-container max-width: 1190 a little more friendly for users will smaller screens with this tutorial (line 13)

As already being told to you in a discusson thread, starting with Ember.js 2 we should use components and services.

In future releases of Ember, the alternative to the controller should be routeable components.

So, yes, this tutorial should be updated to really use Ember 2. Btw, with the current ember-cli, this tutorial based on Ember 1.13.x.

I just bought it since I appreciate your work! :-)

Hi Visva,

What would you change specifically, how would you approach things?

How the app knows the file application/template.hbs is the new one?

Should also, remove updated all comments, the old image is not even there, why should we read nonsense text?

@rousspb: It becomes the new standard when you set usePods: true

should be 'pimp it with some css' not 'pimp it with come css'

There is no indication of how to link the styles to the page

ok the linking happens after the ctrl+c plus ember serve is restarted

@mikesorum: Thanks. Fixed!

@andrsbg: Thanks! Fixed it!

might be due to an ember update or something, but don't see an app/templates/application.hbs

@draco2003: Yes, this is due to a recent update. You have to remove "ember-welcome-page" from your package.json and manually create application.hbs

border-radius and font-size are repeated twice in the button block

@reyescarlj: Right you are! Thanks, I've corrected it now. :)

why don't we need this folders?

@mauritaament: In a POD-structure, those folders are not necessary. You can read more about it here.