Templating with HTMLBars

25 thanks

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

    2
    Tristan Edwards
    Andrés BG
  • 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.
    +
  • 1
    Jordan Arseno
  • 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.

    2
    Tristan Edwards
  • 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.

    2
    Tristan Edwards
  • This is what your final file structure inside the app-folder should look like. Make sure yours looks the same!
    3
    Tristan Edwards
  • 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.

    +
  • +
  • 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:

    2
    Visva DevWorks
    Daniel Jeffery
  • +
  • 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:

    +
  • 1
    Jordan Arseno
  • Now go back to your Handlebars-file and change the text in order to use our new variable:

    +
  • +
  • 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)

    +
  • +
  • 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!

    4
    Tristan Edwards
    Mike Sorum
  • 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:

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

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

    +
  • +
  • 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!

    +

Did it help you? Click to say "thanks" to the author!

Next lesson: Routes

Want to create your own course on Ludu?

Back to lesson