Series: EmberSchool Samples: Intermediate Components

Nested Components

Published on Jul 20, 2016

I'm on a family vacation in Yellowstone, so you're getting another preview of the upcoming EmberSchool Intro Course.

This video shows how to use nested components and how to investigate them in the Ember Inspector. We also create a new component that we use for nesting inside other components.



Hey everyone. I’m currently in Yellowstone National Park, but I’m not about to break the over one-year streak of releasing two episodes a week. So for the next two weeks, you’re going to get some videos from the upcoming EmberSchool course, and we’re going to be talking about some advanced component concepts. This first one, how to nest components, you may already be familiar with. But some of the next three are pretty advanced, especially for an intro course. So stay tuned.

So in this section, we’re going to be learning some more advanced things about components. When I say advanced, I don’t mean necessarily hard, just things that come after the basics.

So as our first item, let’s talk about nested components. So so far, we’ve been putting our components in the controller templates. So the basic diagram, we have our template which is part of a route, and then we can put in components there. But it’s not just those templates that can have components. You can also have components within other components. And we’ve actually already done this. Take a look at our food-item component. We’re using the link-to component in there.

We can verify this by going to the Ember Inspector View Tree, and then clicking the Components checkbox. Then we’ll see that in the food items that are expanded, there are link-to components as well. But it might not sync in until we have a handmade component put in there. So let’s go ahead and turn our image into a component.

We’ll start by generating a component called icon-image. And then we will cut this and put it into icon-image. So let’s see what we want this to look like. So when we’re putting in icon-image, we’ll want to be able to feed it a specific source. So we’ll feed it the source attribute, in this case food.imageUrl, but that can be different depending on where we’re using icon-image. And then we want to be able to decide whether or not we have the pull-left class. So here we do, we’ll put left=true. And if we don’t put anything, then left will automatically equal null. And null for our purposes will be the same thing as false.

So what we just did was an interface design for a component. Basically we’re deciding what things we’ll want to feed the component, what we’ll want it to look like when we’re using it. Now we have to make this match the interface. So first, we’ll just put in the source here. And then we’ll add an if statement, so if left, then we put in pull-left. Then when we go to our page, we can see that not only does it work, but we also have this component here under our food-item component. So we have successfully created two components that are nested within each other. In our diagram it would look like this, the food-item component in the template, we reference the icon-image component. And of course we'll have to reference the arguments that are passed in.

So this particular application of nested components is pretty tame. But out in the wild, there’s some crazy configurations that you can get into. It’s an awesome tool, just be sure not to abuse it. If you have stuff nested twenty components deep, then Ember can start to slow down.

EmberSchool Samples: Intermediate Components

Subscribe to our mailing list