Ember 2.x

Ember 2.x Creating a Component


This course has been updated! We now recommend you take the Ember Octane Fundamentals course.

Check out a free preview of the full Ember 2.x course:
The "Creating a Component" Lesson is part of the full, Ember 2.x course featured in this preview video. Here's what you'd learn in this lesson:

Mike spends a few minutes demonstrating how to create an Ember component. He uses ember-cli to generate all the necessary files and builds out a simple social-info component.

Get Unlimited Access Now

Transcript from the "Creating a Component" Lesson

>> [MUSIC]

>> Michael North: I think the best way to illustrate how this works is to jump in and code one of these things up. So that you guys can see how it all fits together and how it works. And then we're gonna extend our example, our project, by componentizing a few things.

>> Michael North: So I'm just going to create a component with Ember CLI.
>> Michael North: Called social-info. Remember we need the dash in the name. And we can see that a JavaScript file was created, a template was created in this component sub folder of the templates directory and an integration test was created for us.

[00:00:56] So if we go back to our code, I'm gonna close a bunch of this stuff out.
>> Michael North: I'm going to just start consuming it cuz right now it's a component that is blank, it does nothing.
>> Michael North: And what I want us to do is display my name and then some social network links.

>> Michael North: So we'll just start there.
>> Michael North: And right now we are passing data into the component but, we haven't specified how things should be rendered, and so it's not really interesting yet.
>> Michael North: So, I'm gonna open these up side by side, so we can see the JavaScript on the left and the template on the right, both corresponding to this component.

[00:01:57] So, we'll start by consuming this name.
>> Michael North: Fantastic. And then, I'm gonna create a list.
>> Michael North: So there we go. And I'll just add this. Right, so effectively we're already seeing a little bit of a benefit here. Because this is more expressive than this over here on the right.

[00:02:52] If you imagine that you're reviewing your peer's code, I would much rather review what's on the right once and then see this popping up all over the place. Cuz this is telling me what it is, and it has a contract that makes sense for what we're trying to do.

[00:03:08] So we're already seeing a little bit of a benefit here so I'm gonna add a second social network thing.
>> Michael North: And we'll add the equivalent.
>> Michael North: Do not save. All right. So now we've got Twitter and GitHub. So if we wanted to extend a little bit further we can allow it to handle the case where we don't have a Twitter account a little bit more gracefully, this looks silly.

[00:03:49] So, if twitter, and we can do the same thing for GitHub. But now we're starting to see that this logic even one to bread into the header bar file folder of the screens that I'm building. This is really a lower level concern that I wanna be working with.

[00:04:15] So great, and let's say that I want to be able to expand and collapse the social network links. So we'll have to deal with an action here. So I'm gonna give my component a property here called, is.
>> Michael North: So we have isExpanded, which is true by default. So it will start expanded.

>> Michael North: And I want to say if it is collapsed, I wanna see the expand link up here. So.
>> Michael North: All right, so it looks like my inequality maybe flipped, or my conditional.
>> Speaker 2: Did you say it was standard?
>> Michael North: You're right. Thank you. And then down here I'm gonna just wrap this whole thing.

[00:05:43] And down here finally.
>> Michael North: Great. So I've got collapse here.
>> Michael North: And if I give myself a little more room.
>> Michael North: And I click Collapse. All right, so we're getting a similar error to what we were seeing yesterday when we didn't have an action handler. And the reason is, this is an action internal to this component that is unhandled.

[00:06:36] So the same rules apply for unhandled actions in the outside world. The only place where you get the freedom to fire stuff and not care whether someone is listening is firing through the contract between the component and staff outside the component. So here we're gonna add our action.

>> Michael North: A shortcut for flipping the boolean and toggle property. And now we can see we have expendable, collapsible component here. And let's say that we wanted to also make the outside world aware of what's going on here. So maybe, maybe the route needs to be able to listen to what this component is doing.

[00:07:27] We would simply do this.
>> Michael North: On-links-toggle.
>> Michael North: And that's it. So now we're sending an action out, we can listen to it through the contract. And now when we click we're gonna get a new error message saying nothing is handling links toggled. So now what we've done is we've created the binding.

[00:08:05] We've gone through the contract. But now we've opted into listening to it, we have nothing listening, nothing handling this action on the other end. So we would simply go to the route and add an action here.
>> Michael North: And clear this out. And now you can see, our route is aware of what's going on inside this component through an action binding.

[00:08:38] Does this make sense to everyone? Any question so far?