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:


Hidden files are easy to access if you open the entire project folder in Sublime Text.


.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.


This is what your final file structure inside the app-folder should look like. Make sure yours looks the same!


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.


Sweet!


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:


Ember will generate two files: a controller file and a test file (we'll get to the tests towards the end of the course)


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.

Adding a header

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


Wow. Such design.


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):


A simple way to create new files in Sublime Text


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:

app/styles/header.scss

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


This is what your app should look like now. Much better!


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

Comments

profile/avatar/default
William Countiss

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

Visva DevWorks

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! :-)

Daniel Jeffery

Hi Visva,


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

profile/avatar/default
Rouss Pb

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

Jesus Alcaraz

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

Tristan Edwards

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

Mike Sorum

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

Jesus Alcaraz

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

Jesus Alcaraz

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

Tristan Edwards

@mikesorum: Thanks. Fixed!

Andrés BG

POD link is not working...

Tristan Edwards

@andrsbg: Thanks! Fixed it!

profile/avatar/default
Draco2003

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

Tristan Edwards

@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

profile/avatar/default
Reyes Carlj

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

Tristan Edwards

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

profile/avatar/default
Mauritaament

why don't we need this folders?

Tristan Edwards

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