Ember 2 Fundamentals
Create Simple Components in Ember
Components in Ember are great for reusing code throughout our application. We’ll see how each instance of an Ember component has isolated state and we can over ride as well as set default values.
In this lesson, we will learn how to make a simple, reusable component within an Ember application.
[00:00] Let's generate a number component by running ember g component x-counter. Now, if we open up our app/template/components/x-counter.hps, we'll see this is our component's template file. We are going to change this up by adding in a number variable in our template, and also a button with increment as its label.
[00:37] Now, if we open up our application.hps file, and we pass in this component by saying {{x-counter}} and saving. We'll see that the component shows up. Now, you may notice that the number isn't showing up, because it's undefined.
[01:06] Let's define a default value for that number. If we go to x-counter.js, which is in apps/components, we can say number is 0Now, if we save, we'll see that we have a number 0rendering right beside the increment button.
[01:26] Now, let's hook up this increment button to an actual action. What we're going to do in this JavaScript file for our component is make an action's attribute, and then we're going to make a property called increment.
[01:41] What we can do here is then say let number=this.getNumber. Then we can say this.setNumber to number+1, and save. Perfect. Now, if we open up our x-counter.hps template, we can now say action is increment, and save. Now, if we click on this button here, you'll notice that it's now incrementing the number.
[02:19] If we go back to application.hps and we define another x-counter component in this template, you'll notice that two instances of the same component are rendered, but if we click on the increment button, their values increment separately.
[02:38] This is because Ember components run in isolation from one another, and they don't explicitly share state. Additionally, we can override the default value of 0by passing in the number attribute into the component.
[02:56] Let's say number=42. If we save, you'll notice that the component once again renders with that value at 42 instead of 0Incrementing again, it still remains isolated. Additionally, let's say we want to render some text underneath the component.
[03:15] [inaudible] is like a regular HTML tag by doing $x-counter, and then closing it out with a forward slash, and then saying, "This is some text," here. You see that we not only get the component, but we get some text to the right of this.
[03:39] Why is that? Because if we go to our x-counter.hps file, we have this yield attribute within our Handlebars template. If we're actually to move this up above everything else and save, you'll notice that will precede it.
[03:57] This is nice for whenever you want to use some text within the component itself. It doesn't explicitly have to be text per se. It could be another component, to be honest, which is really nice.
[04:14] Let's go to application.hps and let's what we did like x-counter, and we do another instance of x-counter. We get double rendering of it. Still isolated, though, which is still pretty cool in my opinion. Nice. That has been working with components.