Section Review

Review

The final lesson of many sections will be a review. I'll summarize the main things we've learned from the section.

By encountering the material in a different format, it'll make it more likely to stick in your brain.

As an added bonus, I'll change up the way in which I explain things, so if there's something you didn't get in the video it may become clear in the review section.

So let's get going!

Displaying Variables

In this section we edited the application controller and the application template.

They're found at controllers/application.js and templates/application.hbs respectively.

Handlebars

The template is a handlebars file. It ends in .hbs. It's like html with added capabilities.

The first of those added capabilities is using variables from the controller. We can also call these properties.

We display the name property by calling `{{this.name}}`. The name property is defined by the application controller.

Controllers

The controller is a javascript file. It ends in .js. It uses the ES6 Class Syntax to extend Ember's base controller class, which is imported using the ES6 module syntax.

There's an older class definition style, from before Octane, that used the Ember Object syntax. If you see this, don't worry... you can have both types of class syntax in the same app, interacting with each other, although each individual class must choose one or the other.

The controller defines the name property with `name = 'Ember'`, making that property available in the template.

Displaying Objects and Arrays

We increased the complexity of the data we worked with, and learned how to properly display that in the template.

Objects

Objects can be defined in the javascript file just like they normally are in javascript. Nothing new to learn there.

In the template, they can be referenced by stating the path to the value you want. So instead of `{{this.name}}`, you would reference `{{this.book.title}}`. If you have objects with greater depth you can reach as deeply into them as you'd like.

Arrays (and the each helper)

Arrays also act just like they do in regular non-Ember Javascript. We'll discover later on they have some added capabilities, but you don't need to know that to get started; you can use them just like in regular Javascript.

In the template, we can loop through the array using the each helper.

The each helper takes an array (`{{this.books}}` in our example). We also have to provide what we want to display for each item in the array - that information goes within the each block.

Note that although the books array that we give to the each helper has a `this` in front, the each helper itself doesn't. That's because the each helper is not a property defined on the controller. The book that the each helper gives us doesn't have a `this` in front of it for the same reason.

Styles

CSS in Ember works out of the box if you put your styles in styles/app.css.

You can easily use more advanced css tools like Scss, Less, or Tailwind by installing the appropriate addon.

Discussion

0 comments