Ember Arguments

[00:00:00]
>> Mike North: We're going to parameterize one of these components. We wanna be able to pass values in and use that as part of building up the HTML. And we're gonna first look at ChannelHeader, where we're gonna pass in a title and a description. The way we do this in Ember Octane is through named arguments, and here's what that looks like.

[00:00:25]
>> Mike North: So we pick a name for a property, title in this case, and we make sure that we prepend it with the at symbol. And whenever you see this at symbol in a template, this is an indication that this is an immutable piece of data that is being passed into a component from the outside.

[00:00:45]
In this case, we're seeing it from the outside, that we are passing the string into the component. But we can refer to it as @title from within this component just the same. So I have a fancy VS Code extension here where I can Cmd + click on this component name and jump into its template.

[00:01:10]
But if you were using another editor, you could've just gone templates > components > channel-header. That's always where you find components, templates > components, and then the name of the component. So now we're in the channel header, and I can replace general with a handlebars expression, that's what these double curly braces mean.

[00:01:33]
If you've ever used, in JavaScript, tagged template literals, the backtick strings where you can mix regular data, static data, like hello and then world.
>> Mike North: And sorry, I said backtick strings, and that's what I meant. So you can think of handlebars expressions similarly in that anything outside of the expressions is static, in this case, the regular HTML.

[00:02:04]
And anything inside that is an expression that's evaluated. It could be just a value or it could be a function that you invoke and that function returns a value. So in here, we can just say title, and we should see the title change on the right, and it does.

[00:02:21]
Let's do the same thing with the description, and that's this bit down here. We can select that and replace it with a handlebars expression, description. Now, there's nothing there, just like in JavaScript, these values start out empty, right? It's not throwing an error at us, I mean, I could demonstrate that it's not, but it's not.

[00:02:43]
But it's just empty, it's just not there, so we could go back to our application.hbs and give it a description.
>> Mike North: And there you go, so we can see that both the title and the description, their arguments passed into the function, passed into the component, rather. And we're using those as part of building up the HTML.

[00:03:13]
If you're coming from a React background, this is equivalent to props.
>> Mike North: And we haven't dealt with mutating data yet, but it's worth noting that the component cannot change these values, they are immutable. Their components should be given these values, and they should be used and accessed but not changed in any way.

[00:03:40]
>> Mike North: So we've just parameterized our component, and this is the end of step three.
>> Speaker 2: So you said in React, they're called props, what are they called in Ember?
>> Mike North: Arguments, args.