Series: EmberSchool Samples: Intermediate Components

Positional Params in Components

Published on Jul 22, 2016

Positional Params are how you can pass in data to components without specifying the name of the the parameter- instead, you place them in a certain order and Ember assigns a name to each parameter based on its position.

This tool is very useful when designing components to be easy to use- but it's also important to show restraint in how much you use it.

Code

//components/icon-image.js
import Ember from 'ember';

export default Ember.Component.extend({
}).reopenClass({
  positionalParams: ['src']
});
{{icon-image food.imageUrl left=true}}

Transcript

So we’ve created our components, we’ve created our nested components, but when you look at the built-in components such as link-to, you’ll see that there are some things that they’re doing that we don’t know how to do yet. So let’s figure out how to do those.

The first is notice here, it takes three arguments but it doesn’t give any of them a name. For our icon-image, we had to give it the name, like okay, this is what source is equal to, but with link-to it’s just one, two, three. These are called positional params. Now let’s see what we can do to get this in our component.

So we’ll try to make this work. So to make this work, we first have to do something that’s a little funky that I’m not going to explain and it won’t make sense, unless you know about the object system. But bear with me, you don’t have to understand this first part when I type reopenClass to be able to do it and to be able to put in the positionalParams property here. Now positionalParams is going to be an array, and the first param will come first. So this param will be source. And with that, we’ll have gotten this working again.

Now we can go to the other instances of icon-image and take away the name on the source attribute there. And what about the second attribute, the left attribute? Now for good design, we would probably want to leave it name since it’s optional, but just as a demonstration we’ll take it off, and of course right now it won’t work. But if we go to icon-image and add left as the second positional param, now it’s going to work.

So that’s how we do positional params. It includes a little bit of a magic incantation. We don’t quite understand reopenClass yet, but we will by the end of this course. Alright, now before we go, let’s go ahead and make left no longer a positional param.

EmberSchool Samples: Intermediate Components

Subscribe to our mailing list